Question

我有2个切换效果做同样的事情...但我想知道如何将它变成一个切换，这样一个打开，如果我点击另一个，打开的关闭。现在他们都是自己做的，因为有单独的，也有自己独特的类/ id：

$('.class1').click(function(){
    $(this).toggleClass('active');
    $('#id1').toggle(200);
});

$('.class2').on('click', function(){
     $(this).toggleClass('active');
     $('#id2').slideToggle(200);
});

下面是FIDDLE：

TOGGLE to work in one

* 已更新：有没有办法不使用'section'来实现...实际上另一个是div。 cms明智地，它永远不会永远是部分'这就是为什么我想知道是否有办法只使用课程。

Answer 1

我会给项目公共类，以便你可以一起使用它们。

这样的事情：

http://jsfiddle.net/4L2NK/

$('.toggle').click(function(){
    $('.toggle').removeClass('active');
    $(this).toggleClass('active');
    $('section:visible').add($(this).next()).toggle(200);
});

Answer 2

杰森P的答案几乎都是关于钱的，但是这是另一种方法，你需要在HTML中改变的是链接href：

http://jsfiddle.net/davmillar/tqvZh/

HTML：

<a href="#id1" class="class1">open me :)</a>            
    <section id="id1">
        Test
    </section>

<a href="#id2" class="class2">open me :)</a>            
    <section id="id2">
        Test
    </section>

JS：

$('a').click(function(){
    //Figure out which one we're targeting
    var myTarget = $(this).attr('href');
    // Remove 'active' from all buttons besides what you clicked, toggle the class on what you clicked
    $('.active').not(this).removeClass('active');
    $(this).toggleClass('active');
    // Slide up all containers besides your target, then toggle your target
    $('section').not(myTarget).slideUp(200);
    $(myTarget).slideToggle(200);
});

Answer 3

如果您正在寻找一个函数来使用JQuery来处理所有这样的扩展/折叠：

<script>
$(".toggled").slideUp();
$(".clickme").click(function(){
    $(this).next(".toggled").slideToggle("fast");
  });
<script>

<div>
    <h3 class = "clickme">Expand</h3>
    <ul class = "toggled">
        <li>Your Stuff Here!</li>

    </ul>
</div>
<div>
    <h3 class = "clickme">Expand 2</h3>
    <ul class = "toggled">
        <li>Your Stuff Here!</li>

    </ul>
</div>

必须使用具有相同功能的多个切换的类。

2切换功能合二为一

3 个答案: