Question

我的问题是，当用户点击<h4>时，它会在其下方隐藏<div>。这很棒 - 按预期工作。但是，当用户点击同一<h4>时，它会关闭<div>并立即重新打开它。

我需要<div>保持关闭状态。我还需要保留其余的功能。

这是我的jQuery：

$(document).ready(function() {
        $('div#winners-table div').hide();
        $('div#winners-table h4').click(function(){
            $('div#winners-table h4.open').each(function() {
                $(this).attr('class', 'closed');
                $(this).siblings('div').slideUp();
                });
            $(this).toggleClass('open');
            $(this).siblings('div').slideToggle();
            });
        });

修改这是我的HTML：

<div id="winners-table">
        <h3>...</h3>
        <ul>
            <li>
                <h4>...</h4>
                <div>...</div>
            </li><!-- ENDS -->
                    <li>
                <h4>...</h4>
                <div>...</div>
            </li><!-- ENDS -->
                    <li>
                <h4>...</h4>
                <div>...</div>
            </li><!-- ENDS -->
                    <li>
                <h4>...</h4>
                <div>...</div>
            </li><!-- ENDS -->
        </ul>
</div>

Answer 1

在使用您编辑的问题尝试之后，我使用此js：

进行工作

$(document).ready(function() {
        $('div#winners-table div').hide();
        $('div#winners-table h4').click(function(){
            $('div#winners-table h4.closed').removeClass('closed');
            $('div#winners-table h4.open').each(function(){
                $(this).attr('class', 'closed').siblings('div').slideUp();
            });

            if(!$(this).hasClass('open') && !$(this).hasClass('closed')){
              $(this).addClass('open');
              $(this).siblings('div').slideDown();
            }else{
               $(this).removeClass('open');
            }

       });
});

Answer 2

您的问题是因为，在关闭所有h4.open之后，您仍然slideToggle()点击了h4。

$(document).ready(function() {
        $('div#winners-table div').hide();
        $('div#winners-table h4').click(function(){
            var clicked = this;
            $('div#winners-table h4.open').each(function() {
                $(this).attr('class', 'closed');
                if (clicked != this) {
                    $(this).siblings('div').slideUp();
                    }
                });
            $(this).toggleClass('open');
            $(this).siblings('div').slideToggle();
            });
        });

^我添加了一张支票，其中点击的h4不会slideUp()，因此slideToggle()可以按预期完成工作。

修改

这是我的整个HTML文件：

<html> <head> <title>Test</title> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function() { $('div#winners-table div').hide(); $('div#winners-table h4').click(function(){ var clicked = this; $('div#winners-table h4.open').each(function() { $(this).attr('class', 'closed'); if (clicked != this) { $(this).siblings('div').slideUp(); } }); $(this).toggleClass('open'); $(this).siblings('div').slideToggle(); }); }); </script> </head> <body> <div id="winners-table"> <h3>h3</h3> <ul> <li> <h4>H4</h4> <div>div1</div> </li> <li> <h4>h4 2</h4> <div>div 2</div> </li> <li> <h4>h4 3</h4> <div>div 3</div> </li> <li> <h4>h4 4</h4> <div>div 4</div> </li> </ul> </div> </body> </html>

如您所见，我复制了您的HTML并且只替换了省略号。在Ubuntu上测试Firefox 3.5，Chrome 4（开发频道），Opera 10，IE6（通过IEs4Linux）。

jQuery单击功能和slideToggle

2 个答案: