1

縦型メニューについてサポートが必要です。これは私が今持っているものです：http： //jsfiddle.net/x4NbH/

私がやりたい<ul>のは、メニューの別のセクションを開いてクリックして開く場合、開いた部分<ul>を閉じて新しいセクションを開きたい場合です。たとえば、「item-1」が開いている場合、「item-2」をクリックすると、「item-1」が閉じて「item-2」が開きます。

HTML：

<div class="menu-item">
<h4 id="item-1"><a href="#">Item 1</a></h4>
<ul id="item-1">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

<div class="menu-item">
<h4 id="item-2"><a href="#">Item 2</a></h4>
<ul id="item-2">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

<div class="menu-item">
<h4 id="item-3"><a href="#">Item 3</a></h4>
<ul id="item-3">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>

CSS：

.menu-item h4 {
    margin: 0px;
    padding: 0px;
}
.menu-item ul {
    margin: 0px;
    padding: 0px 5px;
    display: none;
}

JavaScript：

$( "h4#item-1" ).click(function() {
    $( "ul#item-1" ).toggle( "blind", 1000 );
});

$( "h4#item-2" ).click(function() {
    $( "ul#item-2" ).toggle( "blind", 1000 );
});

$( "h4#item-3" ).click(function() {
    $( "ul#item-3" ).toggle( "blind", 1000 );
});

どうすれば簡単にこれを達成できますか？

4

3 に答える 3

4

IDは一意である必要があります。代わりにクラスを使用できます。これを試してください：

var $ul = $('ul');
$( "h4" ).click(function() {
    $ul.hide("blind", 1000);
    $(this).next().show( "blind", 1000);
});

http://jsfiddle.net/zaZLj/

于 2013-01-23T01:25:01.940 に答える
2

これを試して：

$('h4').click(function(){
   $(this).closest('div').find('ul').show('blind',1000);
   $(this).closest('div').siblings().find('ul').hide('blind',1000);
});
于 2013-01-23T01:29:03.327 に答える
1

This is not as slick as the Nikko Reyes example above, but it works within the coding you provided to show the complete function used with toggle and the .not() jQuery command as well. I know I’ve done better but I just worked 8+ hours ;) The jsFiddle stuff is here: http://jsfiddle.net/jtMaY/17/

$( "h4#item-1" ).click(function() {
    $( "ul#item-1" ).toggle( "blind", 1000,
        function () { $( "ul" ).not("#item-1").hide(); }
    );
});

$( "h4#item-2" ).click(function() {
    $( "ul#item-2" ).toggle( "blind", 1000,
        function () { $( "ul" ).not("#item-2").hide(); }
    );
});

$( "h4#item-3" ).click(function() {
    $( "ul#item-3" ).toggle( "blind", 1000,
       function () { $( "ul" ).not("#item-3").hide(); }
    );
});
于 2013-01-23T01:51:32.377 に答える