0

私はうまく機能する水平メニューに取り組んでいますが、設計要件に従って<div id="nav-subMenu"></div>、メイン/親メニューにサブメニューliがない場合は高さを変更する必要がありulます。私が書いたjqueryは私にとってはうまくいきません。この点で助けていただければ幸いです。

これはjsFiddleの例です

if ($('#nav-wrapper ul li').has('ul'))いつも戻るtrue

サンプル jQuery 

jQuery(document).ready(function () {

    if ($('#nav-wrapper ul li').hasClass('active')) { //if it does have the class active
        if ($('#nav-wrapper ul li').has('ul')) {
            alert('aaaa');
            $('#nav-subMenu').css("height", "30");
        }
    }
});

サンプル HTML コード

<div id="nav-wrapper">
   <ul class="dropdown dropdown-linear" id="nav">
      <li><span class="dir"><a href="#">Home</a></span></li>
      <li><span class="dir"><a href="#">About Us</a></span></li>
      <li><span class="dir"><a href="Articles.aspx?PageID=5&amp;Language=en-us&amp;ParID=0&amp;Issue=5&amp;CID=1">Articles</a></span></li>
      <li class="active">
         <span class="dir"><a href="Page.aspx?PageID=6&amp;Language=en-us&amp;ParID=0&amp;Issue=5&amp;CID=1">Categories</a></span>
         <ul>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=18">Book Review</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=16">Business</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=3">Culture</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=2">Economy</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=19">Finance</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=17">Infrastructure</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=20">Lifestyle</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=21">Others</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=7">People</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=1">Politics</a></li>
            <li><a href="Page.aspx?PageID=6&amp;Language=1&amp;ParID=6&amp;Issue=1&amp;CID=4">Sports</a></li>
         </ul>
      </li>
      <li><span class="dir"><a href="News.aspx?PageID=3&amp;Language=en-us&amp;ParID=0&amp;Issue=5&amp;CID=1">News</a></span></li>
      <li>
         <span class="dir"><a href="Page.aspx?PageID=12&amp;Language=en-us&amp;ParID=0&amp;Issue=5&amp;CID=1">Archive</a></span>
         <ul>
            <li><a href="Page.aspx?PageID=1&amp;Language=1&amp;ParID=12&amp;Issue=1&amp;CID=1">106</a></li>
            <li><a href="Page.aspx?PageID=3&amp;Language=1&amp;ParID=12&amp;Issue=3&amp;CID=1">102</a></li>
            <li><a href="Page.aspx?PageID=4&amp;Language=1&amp;ParID=12&amp;Issue=4&amp;CID=1">103</a></li>
            <li><a href="Page.aspx?PageID=5&amp;Language=1&amp;ParID=12&amp;Issue=5&amp;CID=1">109</a></li>
         </ul>
      </li>
      <li>
         <span class="dir"><a href="Multimedia.aspx?PageID=10&amp;Language=en-us&amp;ParID=0&amp;Issue=5&amp;CID=1">Multimedia</a></span>
         <ul>
            <li><a href="Videos.aspx?PageID=11&amp;Language=1&amp;ParID=10&amp;Issue=1&amp;CID=1">Video</a></li>
         </ul>
      </li>
   </ul>
</div>
 <div id="nav-subMenu"></div>
<div id="NewsTicker"> </div>

UPDATE：DIVに高さを追加するためにjqueryが起動するタイミングを知るためのFirebugビュー ここに画像の説明を入力

4

3 に答える 3

1

私はあなたの問題を見つけました、そしてこれはあなたが望むように働いています、これを試してください：

jQuery(document).ready(function () {
  if ($("#nav-wrapper li.active").length) {
    alert('yes there are .active class');
    if ($(".active").has('ul').length) {
      alert('yes .active class has ul');
      $('#nav-subMenu').css("height", "60px");
    } else {
      alert("NO .active class don't have ul");
      $('#nav-subMenu').css("height", "0px");
    }
  } else {
    alert("NO .active class found.");
  }
});

こちらのフィドルでこれをチェックしてください：http：//jsfiddle.net/zMty8/27/

于 2013-01-08T06:07:09.837 に答える
0

これを試して：

 if ($('#nav-wrapper ul li').has('ul')) {
     $('#nav-subMenu').css("height", "30px");
 }
 if ($('#nav-wrapper ul li').has('ul')) {
     alert('a');
     $('#nav-subMenu').css("height", "30px");
 }

ここで参照

于 2013-01-08T05:48:36.727 に答える
0

このコードを確認してください:

jQuery(document).ready(function () {

    if ($('#nav-wrapper ul li').hasClass('active')) { //if it doesn't have the class active
        if ($('#nav-wrapper ul li > ul'.length > 0)) {
           $('#nav-subMenu').css("height", "30");
        }
    }
});

デモ

于 2013-01-08T05:50:51.463 に答える