Javascript 如果列表LI使用jquery不适用于我，则更改div的高度_Javascript_Jquery_Css

Javascript 如果列表LI使用jquery不适用于我，则更改div的高度

javascript jquery css

Javascript 如果列表LI使用jquery不适用于我，则更改div的高度,javascript,jquery,css,Javascript,Jquery,Css,我正在制作一个水平菜单，它对我来说很好，但根据设计要求，如果主/主菜单li没有任何ul或子菜单，我需要更改的高度。我写的jquery不适合我，我希望在这方面能得到帮助下面是一个例子 if（$（'#nav wrapper ul li'）.has（'ul'））始终返回true 示例jQuery jQuery(document).ready(function () { if ($('#nav-wrapper ul li').hasClass('active')) { //if it doe

我正在制作一个水平菜单，它对我来说很好，但根据设计要求，如果主/主菜单

li

没有任何

ul

或子菜单，我需要更改

的高度。我写的jquery不适合我，我希望在这方面能得到帮助

下面是一个例子

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>

更新：Firebug视图了解jquery何时应该启动以向DIV添加高度试试这个：

 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");
 }

参考检查此代码：

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");
        }
    }
});

我发现了您的问题，这正按照您的要求运行，请尝试以下方法：

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.");
  }
});

在这里的fiddle中检查这一点：

它触发这两个条件，而不管上面的jquery中是否存在ul或li。请尝试以下操作：

$（'#nav wrapper.active'）。在if语句中有（'ul'）

，然后设置高度。即使这样也不起作用，我不确定你的代码在逻辑上哪里出了问题。我认为如果

li

没有

ul

，你要做的是隐藏子菜单？是的，隐藏子菜单，我认为你做对了。但另一方面，它也应该向导航子菜单添加高度。我以前尝试过相同的代码，但它不起作用。在任何情况下，它都会添加高度，而我只需要在主菜单（父菜单）中存在

li'

或

ul

时才需要添加高度

li

。它不应该在

nav子菜单

div中添加高度，而应该在分类菜单中添加高度，因为它有子菜单。@KnowledgeSeeker我想没有人明白你的问题。我认为只有当父级

li

中包含

ul

时，此代码才有效。那么为什么要在

ready

事件中调用此代码呢。我想它一定是在菜单项的

点击事件中。@Arvid，从逻辑上讲，你的代码看起来不错，但它不能按要求工作。我想要的是，它应该添加height#nav子菜单
这个div
，只要它有子菜单。我试图通过检查我的父菜单是否有任何子菜单li
或ul
元素来捕获此场景。也许我错了，但这是我寻找的基本逻辑，它总是会回到现实；我不确定HTML代码本身是否有问题，对我来说，它看起来很好。是的，您的代码只是在所有li中循环，其中一个类处于活动状态
，然后它将应用jQuery的css代码。即使子菜单为空或没有任何子菜单或ul元素，它仍然会在鼠标悬停时显示子菜单。@KnowledgeSeek尝试这个新功能更新后的答案根据您的截图工作。除此之外，我希望这发生在页面加载事件上，而不仅仅是鼠标悬停事件上。。