Question

首先，我需要说我是jQuery的新手。
我遇到这种情况：http://jsfiddle.net/dVf8m/
我一直想知道是否有办法简化slideToggle。现在我在菜单元素（#trigger1和#trigger2）上有两个ID，隐藏的div（#one和#two）上有两个ID。这也导致了双jQuery。是否可以避免所有的ID并使其更简单？
另一件事是，如果我点击两个菜单元素（第一个和第二个），两个div都会出现。我想一次只能看到一个隐藏的div？当另一个div出现时，如何强制第一个div消失？
另外，如果我想在这种情况下使用fadeIn / fadeOut，当它们都使用.click事件时如何做？

Answer 1

将您的代码更改为以下内容。有一个div类，并添加点击监听器。将任何属性添加到div并给出要切换的div的id。

<div id="top">
    <ul>
      <li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
      <li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
      <li>Third</li>
    </ul>
</div>
<div class="hidden" id="item1">
        <ul>
            <li><a href="#">Smthn</a></li>
            <li><a href="#">Smthn2</a></li>
            <li><a href="#">Smthn3</a></li>
        </ul>
</div>
<div class="hidden" id="item2">
        <ul>
            <li><a href="#">Apple</a></li>
            <li><a href="#">Orange</a></li>
            <li><a href="#">...</a></li>
        </ul>
</div>

$(document).ready(function() {
        $('.toggler').click(function(e) {            
            $("#"+$(this).attr("data-item")).slideToggle(500); 
        });
});

JSFIDDLE

jQuery：单独滑动切换多个元素的简单方法（以及类似的问题）

1 个答案: