列出父母/孩子
我是一个 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技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
你可以简化你的CSS。
您不需要为
.children
使用单独的样式,因为.menu
上的后代选择器将处理您的所有标记。
.menu
中的所有.menu
的最后一个子请注意,我在 jquery 中使用了子选择器而不是后代选择器。
You could simplify your css.
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.Please note that I have used a child selector in jquery instead of a descendent selector.
这里你有一个解决方案:
并且,有以下 jquery:
仅当
li
有一个子项时,我们才会删除边框。希望这有帮助。干杯
希望这有帮助,干杯。
here you have one solution:
And, have the following jquery:
We are removing the border only if the
li
has a child.Hope this helps. Cheers
Hope this helps, cheers.
在埃德加和阿姆里特的帮助下进行了更多测试后,我决定使用这个
埃德加,但我无法让你的解决方案发挥作用,可能是我所做的。
阿米特奇怪的是,当我第一次测试你的解决方案时,它有效,但是,当我更改页面名称时,它停止运行。
我感谢您花时间帮助我找到解决方案
干杯
LRL
After a little more testing based on the help from Edgar and Amrit I settled on this
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