3

jQueryを使用してナビゲーションシステムを作成しています。私が達成したいのは、ページの読み込み時に親要素を表示し、子要素を非表示にすることです。これは非常に簡単に行いました。

ただし、他の親要素を切り替えると、前の子要素を非表示にして、一度に 1 つしか開くことができないようにしたいと考えて<ul>います。

//user nav
$('.child').hide();
$('.parent').click(function() {
    $(this).find('ul').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="rightBottom">
<h1 class="boxheadings">Other functions</h1>
<p class="boxp">Click this button to view your current published site in a new window. This will not show your most recent changes until you click the ‘Publish Changes’ button on the right, alternatively click view local to see unpublished changes.</p>
<ul id="usernav">
    <li class="parent">Manage
        <ul class="child">
            <li>child11</li>
            <li>child12</li>
        </ul>
    </li>
    <li class="parent">Subscriptions
        <ul class="child">
            <li>E-Briefings</li>
            <li>E-Briefings Subscriptions</li>
            <li>Knowledge Briefings</li>
        </ul>
    </li>
    <li class="parent">Media Store
        <ul class="child">
            <li>Image Store</li>
            <li>Document Store</li>
            <li>Media Store</li>
        </ul>
    </li>
</ul>
</div>

4

3 に答える 3

4

終わり 。とても簡単でした。現在のulを表示する前に、すべてを非表示にしています。

見る ：

//hide all children initially
$('.child').hide();

//adding a click handlers to every all parents
$('.parent').click(function() {

   //slide up the children which are open already
   $('.child').slideUp();

   //find the child of clicked parent and toggle its visibility
   $(this).find('ul').slideToggle();
});
于 2013-09-16T09:12:03.520 に答える
4

これを使って

$('.child').hide();
    $('.parent').click(function() {
        $(this).siblings('.parent').find('ul').slideUp();
        $(this).find('ul').slideToggle();
    });

フィドル

于 2013-09-16T09:13:12.120 に答える
0

ULいずれかを展開する前に、すべての s を折りたたむだけです。

slideToggle を実行する前に、次の行を追加します。

$('#usernav').find('ul').slideUp();

$('.child').hide();
$('.parent').click(function() {
    $('#usernav').find('ul').slideUp();
    $(this).find('ul').slideToggle();
});
于 2013-09-16T09:13:31.977 に答える