1

我目前有一个列表，其中包含一个隐藏/显示隐藏 div 的特定链接。单击链接时，将删除并添加“活动”类，并检查隐藏的 div 以查看它是可见的还是隐藏的，并相应地隐藏/显示。这一切正常，但是，有一个问题。当我单击 Square 时，我想显示 #square，但是当我再次单击它时，我想隐藏 #square 但因为我正在检查 .active，所以无法完成。任何人都可以就如何更新代码提供任何建议以实现这一目标？

JS

$(document).ready(function(){

    var square = $('#square'),
        test = $('#test');

    square.hide();

    test.find('a').on('click', function(e){

        if( !$(this).hasClass('active') ){


            if ( square.is(':visible') ){
              square.hide();
            }

            var id = $(this).data('id');

            test.find('a').removeClass('active');
            $(this).addClass('active');

            if( id === 'square' ){
              square.show();
            }

        }

        e.preventDefault();
    });        

});​

HTML

<ul id="test">
<li><a href="#">Triangle</a></li>
<li><a href="#" data-id="square">Square</a></li>
<li><a href="#">Circle</a></li>
</ul>

<div id="square"></div>​

小提琴：http: //jsfiddle.net/xBuUY/

4

3 回答 3

1

移动这段代码 -- if ( square.is(':visible') ){ square.hide(); 在 hasClass('active') 检查之外。

于 2012-05-23T20:58:19.317 回答
1

你的逻辑可以被简化，你想要切换square而不考虑类，所以我已经square在类测试之外删除了切换。在这里试试这个小提琴

于 2012-05-23T21:00:53.337 回答
1

我为你的小提琴做了一个叉子。除了检查哪个链接应该处于活动状态之外，我已经移动了测试方块是否应该可见的块。已#square切换，并且不仅显示了当它已经处于活动状态时它被隐藏的哪些保证。只需测试小提琴。

除此之外，我优化了事件处理程序：它现在使用委托，这比每个链接上的链接处理程序更快。防止链接的冒泡e.stopPropagation()。出于性能原因，我在调用任何其他方法或其他任何方法之前添加了它。

于 2012-05-23T21:05:06.813 回答