列出父母/孩子

发布于 2024-11-18 01:23:34 字数 1592 浏览 2 评论 0原文

我是一个 jQuery 新手。我喜欢使用 jQuery 并且正在尝试做得更好。

我有以下列表作为菜单:

页面主页:没有子

<ul class="menu">
<li>Team 1 Photos</li>
<li>Team 2 Photos</li>
<li>Group Activities</li>
</ul>

页面 子页面有子页面

<ul class="menu">
<li>Team 1 Photos</li>
<li>Team 2 Photos</li>
<li>Group Activities
    <ul class="children">
    <li>Team 1 News</li>
    <li>Team 2 News</li>
</ul>
</li>
</ul>

我的 CSS 是:

ul.children {
    width: auto;
    margin-left: 0;
}
ul.children li{
    border-bottom:1px solid #999;
    margin-bottom: 10px;
   padding-bottom: 3px;
}
ul.children li:last-child{
    border-bottom:1px solid #999 !important;
}
ul.menu {
    width: auto;
    margin-left: 0;
}
ul.menu li{
    border-bottom:1px solid #999;
    margin-bottom: 10px;
   padding-bottom: 3px;
}
ul.menu li:last-child{
    border-bottom:none;
}

我正在尝试实现;如果没有子元素,则最后一个

  • 具有 border-bottom。 如果有孩子,最后一个
  • 就没有边框
  • 我希望我说得通

    我已经尝试过直接应用边框是/否或添加一个类以便我可以应用风格:

    jQuery('#menu ul li:has(ul)').parent('li').prev()).css('border','1px solid #000');
    

    if (jQuery('.menu li:has(ul)') ) {
      ('ul.menu li:last-child').add Class('borderme');
    

    jQuery('.menu li:has(ul)').append('borderyes');
    

    现在我陷入困境,所以请引导我走向正确的方向,以便我可以学习如何实现这一目标。

    谢谢你

    LRL

    I am a jQuery novice. I enjoy using jQuery and am attempting to get better at it.

    I have the following list as a menu:

    Page home: no child

    <ul class="menu">
    <li>Team 1 Photos</li>
    <li>Team 2 Photos</li>
    <li>Group Activities</li>
    </ul>
    

    Sub-page has child

    <ul class="menu">
    <li>Team 1 Photos</li>
    <li>Team 2 Photos</li>
    <li>Group Activities
        <ul class="children">
        <li>Team 1 News</li>
        <li>Team 2 News</li>
    </ul>
    </li>
    </ul>
    

    My CSS is:

    ul.children {
        width: auto;
        margin-left: 0;
    }
    ul.children li{
        border-bottom:1px solid #999;
        margin-bottom: 10px;
       padding-bottom: 3px;
    }
    ul.children li:last-child{
        border-bottom:1px solid #999 !important;
    }
    ul.menu {
        width: auto;
        margin-left: 0;
    }
    ul.menu li{
        border-bottom:1px solid #999;
        margin-bottom: 10px;
       padding-bottom: 3px;
    }
    ul.menu li:last-child{
        border-bottom:none;
    }
    

    I am trying to achieve; the last <li> to have border-bottom if there is no child.
    the last <li> to have no border if there is a child

    I hope I am making sense

    I have tried way to either directly apply the border yes/no or add a class so I can apply the style:

    jQuery('#menu ul li:has(ul)').parent('li').prev()).css('border','1px solid #000');
    

    if (jQuery('.menu li:has(ul)') ) {
      ('ul.menu li:last-child').add Class('borderme');
    

    jQuery('.menu li:has(ul)').append('borderyes');
    

    An now I am stuck so please steer me in the right direction so I can learn how to achieve this.

    Thank you

    LRL

    如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(3

    装迷糊 2024-11-25 01:23:34

    你可以简化你的CSS。

    ul.menu, ul.children {
            width: auto;
            margin-left: 0;
        }
    ul.menu li{
            border-bottom:1px solid #999;
            margin-bottom: 10px;
            padding-bottom: 3px;
        }
    

    您不需要为 .children 使用单独的样式,因为 .menu 上的后代选择器将处理您的所有

  • 标记。 .menu 中的所有
  • 现在都有边框。要从 .menu 的最后一个子
  • 中删除边框(如果它有子菜单),您可以使用以下代码。
  • $('ul.menu > li:last-child').has('ul').css('border-bottom','none');
    

    请注意,我在 jquery 中使用了子选择器而不是后代选择器。

    You could simplify your css.

    ul.menu, ul.children {
            width: auto;
            margin-left: 0;
        }
    ul.menu li{
            border-bottom:1px solid #999;
            margin-bottom: 10px;
            padding-bottom: 3px;
        }
    

    You don't need seperate styles for .children because the descendent selector on .menu will take care of all the <li> in your markup. All <li> within .menu will now have a border. To remove border from the last child <li> of .menu if it has a sub-menu, you could use the following code.

    $('ul.menu > li:last-child').has('ul').css('border-bottom','none');
    

    Please note that I have used a child selector in jquery instead of a descendent selector.

    东京女 2024-11-25 01:23:34

    这里你有一个解决方案:

    ul.children {
            width: auto;
            margin-left: 0;
        }
        ul.children li{
            border-bottom:1px solid #999;
            margin-bottom: 10px;
           padding-bottom: 3px;
        }
        /* Remove this css rule
        ul.children li:last-child{
            border-bottom:1px solid #999 !important;
        }
        */
        ul.menu {
            width: auto;
            margin-left: 0;
        }
        ul.menu li{
            border-bottom:1px solid #999;
            margin-bottom: 10px;
           padding-bottom: 3px;
        }
        /* Remove this css rule
        ul.menu li:last-child{
            border-bottom:none;
        }*/
    

    并且,有以下 jquery:

    $(document).ready(function(){
        $("ul.menu li:last-child:has(ul)").css("border-bottom", "none");
    });
    

    仅当 li 有一个子项时,我们才会删除边框。

    希望这有帮助。干杯
    希望这有帮助,干杯。

    here you have one solution:

    ul.children {
            width: auto;
            margin-left: 0;
        }
        ul.children li{
            border-bottom:1px solid #999;
            margin-bottom: 10px;
           padding-bottom: 3px;
        }
        /* Remove this css rule
        ul.children li:last-child{
            border-bottom:1px solid #999 !important;
        }
        */
        ul.menu {
            width: auto;
            margin-left: 0;
        }
        ul.menu li{
            border-bottom:1px solid #999;
            margin-bottom: 10px;
           padding-bottom: 3px;
        }
        /* Remove this css rule
        ul.menu li:last-child{
            border-bottom:none;
        }*/
    

    And, have the following jquery:

    $(document).ready(function(){
        $("ul.menu li:last-child:has(ul)").css("border-bottom", "none");
    });
    

    We are removing the border only if the li has a child.

    Hope this helps. Cheers
    Hope this helps, cheers.

    氛圍 2024-11-25 01:23:34

    在埃德加和阿姆里特的帮助下进行了更多测试后,我决定使用这个

    jQuery('.menu li').has('ul').css({'border' : 'none','margin-bottom' : '0'});                            
    

    埃德加,但我无法让你的解决方案发挥作用,可能是我所做的。
    阿米特奇怪的是,当我第一次测试你的解决方案时,它有效,但是,当我更改页面名称时,它停止运行。

    我感谢您花时间帮助我找到解决方案

    干杯
    LRL

    After a little more testing based on the help from Edgar and Amrit I settled on this

    jQuery('.menu li').has('ul').css({'border' : 'none','margin-bottom' : '0'});                            
    

    Edgar I could not get your solution to work, probably something I did.
    Amit strangly when I first tested your solution it worked however, when I changed the page names it stopped functioning.

    I appreciate the time you have given in helping me find a solution

    Cheers
    LRL

    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文