jQuery

Question

标题一定是看不懂，抱歉。将尝试解释我正在尝试做的事情。使用 jQuery 滑动展开容器。我有一个导航菜单，例如：

<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" data-cat="tech">Technology</a></li>
<li><a href="#" data-cat="world">World</a></li>
</ul>
</nav>

然后是一个临时隐藏的容器：

<div id="categories">
<div id="tech">
The category "Tech", Links with images (articles)
</div>
<div id="world">
The category "World", Links with images (articles)
</div>
</div>

脚本需要做的是获取"data-cat"属性，然后滑动具有此"ID"的相应div。如果有任何类别容器，它需要显示它（向下滑动）。否则，如果有任何已展开的内容，则需要滑动（如旋转木马）到新的切换类别（来自 left/right）。我的问题是我无法让它工作。实际上，我不知道该怎么做。

Answer 1

$(function () {
  $('#nav [data-cat]').on('click', function (e) {
    e.preventDefault();

    var cat = $(this).attr('data-cat');
    $('#categories').find('#' + cat).slideDown().siblings().slideUp();
  });
});

#categories div {
  display: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#" data-cat="tech">Technology</a></li>
        <li><a href="#" data-cat="world">World</a></li>
    </ul>
</nav>


<div id="categories">
    <div id="tech">The category "Tech", Links with images (articles)</div>
    <div id="world">The category "World", Links with images (articles)</div>
</div>

jQuery - 从导航 link 到滑动可扩展容器

jQuery - From a nav link to a sliding expandable container

menu

nav