0

モバイル Web サイトのナビゲーション ツールとしてネストされたリストがあります。最後の li の a.close-link は、jquery を使用してリスト #menu を閉じる/非表示にする必要があります。

<ul id="navi">

<li><a href="#">Mobile Navigation</a>  

<ul id="menu">

    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>

</ul>                       
</li>                               
</ul>

これまでのところ、私の作業中のjqueryソリューションは次のとおりです。

$(document).ready(function() {
    $("li a.close").click(function() {
        $(this).parent().hide();
        return false;
    });
});

問題: リストが「非表示」の状態のままです。これは、ネストされたナビゲーション リスト #menu を再び開くことができないことを意味します。jquery の行を追加してデフォルトの状態に戻すにはどうすればよいですか?

助けてくれてありがとう！

ご協力ありがとうございました！あなたは正しい解決策を導き出しました:

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

そしてjqueryコード：

$(document).ready(function() {
    $("li a.close").click(function() {
        $("#menu").children().hide();
        return false;
    });
    $(".openul").mouseover(function() {
        $("#menu").children().show();
    });
});

マウスオーバー時にナビゲーション リストが開いたままになるため、モバイル ブラウザーで非常に便利です。

4

3 に答える 3

1 
 <ul id="navi">

<li><a href="#">Mobile Navigation</a>  

<a class="openul" href="#" style="display:none">Open parent list</a>

<ul id="menu">

    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>

</ul>                       
</li>                               
</ul>

を作成し<a>て非表示にし、クリックして親リストを閉じると、その が表示され<a>ます。その<a>onclickはあなたを再び開き、#menuそれ自体を非表示にします

 $(document).ready(function()  {            
        $("li a.close").click(function() {
            $("#menu").hide();
            $(".openul").show();
            return false;
        });   
    $(".openul").click(function(event){
        event.preventDefault();
        $(this).hide();
        $("#menu").show();
    });
});
于 2013-04-09T12:09:23.770 に答える
0

これを試して：

// Hide the Close li on page load
$("li a.open").parent().hide();

// On click of close, hide the close li and open the show li
$("li a.close").click(function () {
    $(this).parent().hide();
    $(this).parent().next().show();
    return false;
});

// On click of open, hide the show li and open the close li
$("li a.open").click(function () {
   $(this).parent().hide();
    $(this).parent().prev().show();
    return false;
});

デモはこちら

于 2013-04-09T12:10:00.223 に答える
0

ご協力ありがとうございました。あなたは正しい解決策を導き出しました:

<ul id="navi">
<li><a class="openul" href="#">Mobile Navigation</a>  
<ul id="menu">
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#" class="close">Close parent list</a></li>
</ul>                       
</li>                               
</ul>

そしてjqueryコード：

$(document).ready(function() {
    $("li a.close").click(function() {
        $("#menu").children().hide();
        return false;
    });
    $(".openul").mouseover(function() {
        $("#menu").children().show();
    });
});
于 2013-04-10T08:10:26.577 に答える