Question

我有两个面板。对于两个面板的两个，我有两个打开按钮。因此，当我点击第一个按钮时，我的第一个面板打开了。一切安好。但现在，当我需要打开下一个面板时，我想首先关闭它。这两块面板不是同时打开的。我不想为那些添加分隔的类，只想使用opened类。这是我的代码和thx求助：

$('.js-sp-closing-button.opened').live('click', function(){
    if($(this).next.next('.js-scrolling-list').hasClass('opened_panel')){
       $(this).removeClass('opened_panel')
    }
});

<span class="top_ticker_small_02 js-sp-closing-button opened">All</span>
<div class="pp_elements js-scrolling-list opened_panel">...</div>
...
<span class="top_ticker_small_02 js-sp-closing-button">All</span>
<div class="pp_elements js-scrolling-list">...</div>

Answer 1

你是missed the next parenthesis，。next .next（将是.next（）。next（。You can pass class name to next function instead of having two next function调用，，如果你不是故意跳过元素。

$('.js-sp-closing-button.opened').live('click', function(){
    if($(this).next().next('.js-scrolling-list').hasClass('opened_panel')){
       $(this).removeClass('opened_panel')
    }
});

Answer 2

关于打开和关闭面板的问题，为什么不在打开新面板之前关闭所有面板。类似的东西：

$('.js-sp-closing-button.opened').live('click', function(){
    //Close all panels
    $('.js-scrolling-list').removeClass('opened_panel');
    /** Code to open next panel **/
});

此外，.next是一种方法，您需要使用括号来调用它。

$('.js-sp-closing-button.opened').live('click', function(){
    if($(this).next().next('.js-scrolling-list').hasClass('opened_panel')){
       $(this).removeClass('opened_panel')
    }
});

根据您的意图，可能不需要两次调用.next（）。如果这两个面板是兄弟姐妹，则只需调用.next（）即可指定选择器.js-scrolling.list。

示例：

$('.js-sp-closing-button.opened').live('click', function(){ if($(this).next('.js-scrolling-list').hasClass('opened_panel')){ $(this).removeClass('opened_panel') } });

Answer 3

这样做更容易......

$('.js-scrolling-list').live('click', function(){

    $('.js-scrolling-list').removeClass('opened_panel');
    $(this).addClass('opened_panel');

});

实施例： http://jsfiddle.net/snKM8/2/

Answer 4

这是我设法得到的，工作的好 - 也许有人将来会受益。对你们所有人来说：

$('.js-sp-closing-button').live('click', function(){
    $(this).toggleClass('opened');
    if ($(this).hasClass('opened')){
        $('.js-sp-closing-button').removeClass('opened');
        $(this).addClass('opened');
        $('.js-scrolling-list').removeClass('opened_panel');
        $(this).next('div').addClass('opened_panel');
    } else {
        $('.js-sp-closing-button').removeClass('opened');
        $(this).next('div').removeClass('opened_panel');
        $(this).removeClass('opened');
    }
});

如何使用jQuery指定类来关闭下一个元素

4 个答案: