手风琴我想更改第一个 li 边框半径和最后一个 li 边框半径,我该怎么做请帮助我.
accordion i want to change first li border radius and last li border radius how can i doo pls help me
我想在第一个li
和最后一个li
border radius 10 px
做。
我尝试使用第一个和最后一个孩子 css3,但它不起作用,我不知道为什么。
$(document).ready(function(){
$('#cssmenu > ul > li ul').each(function(index, element){
var count = $(element).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(element).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});// jQuery code goes here!
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 250px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #bd0e36;
color: #ffffff;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
position: relative;
}
#cssmenu > ul > li > a > span {
background: #ed1144;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #bd0e36;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #ed1144;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Location</span></a></li>
</ul>
</li>
</ul>
</div>
将:first-child
和:last-child
选择器与border-<top/bottom>-<left/right>-radius
一起使用。您有一些叠加层,因此您需要在多个元素上应用边框半径,或者在li:last-child
和li:first-child
上使用overflow:hidden
(感谢 Danko)。
UPDATE添加了一些花哨的施曼奇边框半径动画。
$(document).ready(function(){
$('#cssmenu > ul > li ul').each(function(index, element){
var count = $(element).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(element).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});// jQuery code goes here!
});
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 250px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #bd0e36;
color: #ffffff;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
position: relative;
}
#cssmenu > ul > li > a > span {
background: #ed1144;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #bd0e36;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #ed1144;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}
#cssmenu ul li:last-child > a {
transition-property: border-radius;
transition-duration: 200ms;
}
#cssmenu ul li:last-child > a, #cssmenu ul ul li:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#cssmenu ul li:first-child > a {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#cssmenu ul li:last-child.active > a, #cssmenu ul li:last-child.active > a > span:first-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#cssmenu ul li:last-child > a > span:first-child{
border-bottom-left-radius: 10px;
}
#cssmenu ul li:first-child > a > span:first-child{
border-top-left-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Widgets</span></a></li>
<li><a href='#'><span>Menus</span></a></li>
<li><a href='#'><span>Products</span></a></li>
</ul>
</li>
<li><a href='#'><span>Company</span></a>
<ul>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Location</span></a></li>
</ul>
</li>
</ul>
</div>
有两个伪选择器可以让你做这个技巧:---:第一个孩子 {...}---:最后一个孩子 {...}如果你正确使用它们,你可以得到你所要求的。
相关文章:
- 如果我在javascript中输入无效的电子邮件或空白,如何显示特定的文本框边框红色
- 使用CSS或js,使用动态选择器选择任意li的下一个元素
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 更改li标记文本的Javascript
- 完全可链接的li元素
- 使用jquery动态创建ul-li
- tiltSlider播放/暂停视频元素(如果li有当前类)
- 使用下拉列表筛选列表(ul>li)
- jQuery动画-边框宽度和颜色
- 在bootstrap中显示隐藏特定的li
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- AngularJS Navigation (li ng-repeat, create header li), DOM
- 使用Jquery在li内部获取具有特定文本的锚点
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- 如何将li类更改为li id's在Jquery中
- 边框颜色是't如果输入为空,则更改
- ul-li专属功能
- HighCharts:3D柱形图在选择时更改边框颜色
- 手风琴我想更改第一个 li 边框半径和最后一个 li 边框半径,我该怎么做请帮助我.
- 如何使用css将边框应用于特定li的锚标记