0

我的问题是，当用户单击<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>
4

2 回答 2

2

在用你编辑过的问题尝试之后，我开始使用这个 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');
            }

       });
});
于 2010-01-20T09:54:05.177 回答
2

你的问题是因为，在关闭 all 之后h4.open，你仍然slideToggle()是 clicked 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><!-- ENDS -->
                    <li>
                <h4>h4 2</h4>
                <div>div 2</div>
            </li><!-- ENDS -->
                    <li>
                <h4>h4 3</h4>
                <div>div 3</div>
            </li><!-- ENDS -->
                    <li>
                <h4>h4 4</h4>
                <div>div 4</div>
            </li><!-- ENDS -->
        </ul>
</div>
</body>
</html>

As you can see, I copied your HTML and only replaced the ellipses. Tested on Firefox 3.5, Chrome 4 (dev channel), Opera 10, IE6 (via IEs4Linux) on Ubuntu.

于 2010-01-20T10:55:08.343 回答