0

我想展开和折叠 div。为此，我使用：-

<ul class="link">
    <li>main link 1<span>[-]</span>
        <ul class="inner_div" style="display:block">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
<ul class="link">
    <li>main link 2<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
 <ul class="link">
    <li>main link 3<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>
 <ul class="link">
    <li>main link 4<span>[+]</span>
        <ul class="inner_div">
            <li><a>test 1</a></li>
            <li><a>test 2</a></li>
            <li><a>test 3</a></li>
        </ul>
    </li>
</ul>

脚本是：-

$('.link span').click(function(){
$(".inner_div").hide();
var $ul = $(this).next();
$(this).html( $ul.is(':visible') ? '[+]' : '[&ndash;]');
$ul.slideToggle();

});

CSS是： - 

.inner_div{ display:none; }
.link span { float: right; cursor: pointer; }

它可以工作，但是当我再次单击展开 div 时，它应该被隐藏。但它并没有隐藏。另一个问题是加减号无法正常工作。

4

1 回答 1

1

当你这样做时，$(".inner_div").hide()你也隐藏了当前打开的内容。稍后当您说它$ul.slideToggle()会重新打开内容时（因为它现在被隐藏了）。

将其更改为：

$('.link span').click(function () {
    var $ul = $(this).next();
    $(".inner_div").not( $ul ).hide();
    $( '.link span' ).html( '[+]' );
    if( !$ul.is( ':visible' ) ) {
        $( this ).html( '[&ndash;]');
    }
    $ul.slideToggle();
});

这也将解决 +/- 问题。

演示：http: //jsfiddle.net/S7MjY/2/

作为旁注：不要在 HTML 中对最初打开的菜单进行硬编码。而是让所有菜单项以相同的方式开始，并使用 JavaScript 打开默认菜单项。

于 2013-02-21T10:19:28.550 回答