css转换属性不按预期在元素上工作
我有一个导航侧栏，只需单击一个按钮即可展开，并在再次单击同一按钮时收缩。
折叠导航栏时，按钮上的文字显示 EXPAND＆gt;
当导航栏展开时，按钮上的文字显示 COLLAPSE＆lt;
请参阅此codepen link
问题是按钮上的文字“EXPAND”或“COLLAPSE”水平显示，而我希望它们像这样垂直显示。
我使用CSS转换属性通过以下方式旋转文本-90deg，它最初工作正常。
#expand, #collapse{
font-size: 0.8em;
font-weight: bold;
font-family: 'Ubuntu', serif;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
但是当我编写以下Jquery代码时，文本不再显示为旋转。
if( $('.option').hasClass('non-visible') ){ // Collapsed
$('.open-menu').css('display','unset');
$('.close-menu').css('display','none');
} else { // Expanded
$('.open-menu').css('display','none');
$('.close-menu').css('display','unset');
}
以下是按钮的HTML代码：
<button id="button-expand">
<p id="expand" class="open-menu">EXPAND</p>
<i class="fa fa-chevron-right open-menu" aria-hidden="true"></i>
<p id="collapse" class="close-menu">COLLAPSE</p>
<i class="fa fa-chevron-left close-menu" aria-hidden="true"></i>
<p><!-- nothing --></p>
</button>
需要Jquery代码在按钮上选择性地显示“EXPAND”或“COLLAPSE”（取决于导航栏是否展开或折叠）。
请告诉我我做错了什么。是否存在某种冲突/压倒一切？
谢谢！
2 个答案:
答案 0 :(得分：1)
用空格unset替换""值。当你使用unset时，它看起来好像是连锁反应（可能会级联？）。无论如何，当在display:none之间切换时，使用""空格的常见做法是因为它会触发默认display（initial）
$('.open-menu').css('display','');
$('.close-menu').css('display','none');
} else { // Expanded
$('.open-menu').css('display','none');
$('.close-menu').css('display','');
答案 1 :(得分：0)
但是当我编写以下Jquery代码时，文本不再显示为旋转。
无需更改您的jQuery代码或HTML。
您只需添加 #expand，#collapse {：
writing-mode: vertical-rl;
writing-mode：该属性定义文本行是水平放置还是垂直放置以及块进展的方向。
vertical-lr ：内容从上到下垂直流动，从左到右水平流动。下一条垂直线位于上一行的右侧
在这种情况下，您需要更改：
transform: rotate(-90deg)
为：
transform: rotate(-180deg)
因此你的css类是：
#expand, #collapse{
font-size: 0.8em;
font-weight: bold;
font-family: 'Ubuntu', serif;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
writing-mode: vertical-rl
}
$(document).ready(function(){
// initially I want the side bar collapsed
$('.option').addClass('non-visible');
$('.dropdown').slideUp(0);
$('.side-dropdown').slideUp(0);
dowork();
$('#button-expand').click(function(){
$('.option').toggleClass('non-visible');
dowork();
});
listItems = document.getElementsByTagName("LI");
for(i = 0; i < listItems.length - 3 ; i ++){
listItems[i].addEventListener("mouseenter", function(){
if( $('.option').hasClass('non-visible') ){
var id = $(this).attr('id');
var dropdown_id = id+"-submenu";
$(`#side-${dropdown_id}`).slideDown('medium');
}
else {
var id = $(this).attr('id');
var dropdown_id = id+"-submenu";
$(`#${dropdown_id}`).slideDown('medium');
}
});
listItems[i].addEventListener("mouseleave", function(){
if( $('.option').hasClass('non-visible') ){
var id = $(this).attr('id');
var dropdown_id = id+"-submenu";
$(`#side-${dropdown_id}`).slideUp(0);
}
else {
var id = $(this).attr('id');
var dropdown_id = id+"-submenu";
$(`#${dropdown_id}`).slideUp(0);
}
});
}
})
var dowork = function(){
if( $('.option').hasClass('non-visible') ){ // Collapsed
$('.open-menu').css('display','unset');
$('.close-menu').css('display','none');
} else { // Expanded
$('.open-menu').css('display','none');
$('.close-menu').css('display','unset');
}
}.container-fluid > .row > .col-md-12 {
padding: 0;
height: 100vh;
}
.left-panel{
float: left;
height: 100%;
background-color: #34495e;
position: relative;
}
#upper-list{
list-style: none;
/*float: left;*/
padding: 0;
}
#upper-list > li{
display: flex;
align-items: center;
position: relative;
/*border: 1px solid orange;*/
}
#upper-list > li:nth-child(1){
margin-top: 0.5em;
margin-bottom: 2em;
}
#upper-list > li:hover,
#lower-list > li:hover{
cursor: pointer;
}
#upper-list > li:hover > div,
#upper-list > li:hover > div > i,
#lower-list > li:hover > div,
#lower-list > li:hover > div > i {
color: #FFC300;
}
.user-image-container{
width: 4em;
display: flex;
justify-content: center;
}
.user-image{
height: 3em;
width: 3em;
border: 2px solid white;
border-radius: 50%;
background-image: url('http://www.mrbeantvseries.co.uk/bean3.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#person_name{
font-size: 1.2em;
margin-bottom: 0px;
/*border: 1px solid lightblue;*/
}
.icon-container{
padding: 0.6em 2em;
float: left;
width: 4em;
display: flex;
justify-content: center;
/*border: 1px solid skyblue;*/
}
.icon-container > i {
font-size: 1.2em;
color: white;
}
.option{
padding: 0.5em 1em;
float: left;
font-size: 0.8em;
font-family: 'Ubuntu', serif;
color: white;
/*border: 1px solid skyblue;*/
}
.dropdown{
list-style: none;
padding: 0;
width: 100%;
}
.side-dropdown{
position: absolute;
left: 4em;
top: 0;
width: 160px;
list-style: none;
padding: 0;
box-shadow: 2px 2px 5px lightgrey,
2px -2px 5px lightgrey;
}
.dropdown > li,
.side-dropdown > li {
padding: 0.4em 1em;
font-size: 0.9em;
font-family: 'Ubuntu' , serif;
background-color: #F7F7F7;
}
.dropdown > li:hover,
.side-dropdown > li:hover{
background-color: lightgrey;
cursor: pointer;
}
#button-expand{
/*position: relative;*/
height: 100%;
width: 1.5em; /*requied to contain the expand text*/
color: #807F7F;
border: 1px solid lightgrey;
background: linear-gradient(to right, #C1C1C1,#F3F3F3);
}
#button-expand:focus{
outline: 0;
}
#expand, #collapse{
font-size: 0.8em;
font-weight: bold;
font-family: 'Ubuntu', serif;
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
writing-mode: vertical-rl
}
.non-visible{
display: none;
}
#lower-list{
position: absolute;
bottom: 0;
padding: 0;
}
#lower-list > li{
margin-bottom: 0!important;
float: left;
}
.square{
width: 0;
height: 0;
position: absolute;
left: 50%;
border-bottom: 0.5em solid transparent;
border-top: 0.4em solid #34495e;
border-left: 0.4em solid transparent;
border-right: 0.4em solid transparent;
}
.side-square{
width: 0;
height: 0;
position: absolute;
top: 1em;
border-bottom: 0.5em solid transparent;
border-top: 0.5em solid transparent;
border-left: 0.35em solid #34495e;
border-right: 0.2em solid transparent;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=News+Cycle:400,700|PT+Sans:400,700|Ubuntu">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="left-panel">
<ul id="upper-list">
<li>
<div class="user-image-container">
<div class="user-image">
<!-- picture inserted here -->
</div>
</div>
<div class="option">
<p id="person_name">Mr. Bean</p>
<p id="person_email">mrbean@gmail.com</p>
</div>
</li>
<li id="contacts">
<div class="icon-container">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="option">
CONTACTS
</div>
<ul class="side-dropdown" id="side-contacts-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="contacts-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li id="products">
<div class="icon-container">
<i class="fa fa-cog" aria-hidden="true"></i>
</div>
<div class="option">
PRODUCTS
</div>
<ul class="side-dropdown" id="side-products-submenu">
<div class="side-square"></div>
<li>Product templates</li>
<li>Products</li>
<li>Categories</li>
<li>Attributes</li>
<li>Tree nodes</li>
<li>Gift card</li>
<li>Bill of materials (BOM)</li>
<li>Price lists</li>
<li>Product suppliers</li>
<li>Attribute sets</li>
<li>Reports</li>
<li>Import product locations</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="products-submenu">
<div class="square"></div>
<li>Product templates</li>
<li>Products</li>
<li>Categories</li>
<li>Attributes</li>
<li>Tree nodes</li>
<li>Gift card</li>
<li>Bill of materials (BOM)</li>
<li>Price lists</li>
<li>Product suppliers</li>
<li>Attribute sets</li>
<li>Reports</li>
<li>Import product locations</li>
</ul>
<li id="sales">
<div class="icon-container">
<i class="fa fa-usd" aria-hidden="true"></i>
</div>
<div class="option">
SALES
</div>
<ul class="side-dropdown" id="side-sales-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="sales-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li id="purchase">
<div class="icon-container">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</div>
<div class="option">
PURCHASE
</div>
<ul class="side-dropdown" id="side-purchase-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="purchase-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li id="shipping">
<div class="icon-container">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
<div class="option">
SHIPPING
</div>
<ul class="side-dropdown" id="side-shipping-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="shipping-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li id="inventoryNstock">
<div class="icon-container">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
<div class="option">
INVENTORY & STOCK
</div>
<ul class="side-dropdown" id="side-inventoryNstock-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="inventoryNstock-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li id="production">
<div class="icon-container">
<i class="fa fa-bullseye" aria-hidden="true"></i>
</div>
<div class="option">
PRODUCTION
</div>
<ul class="side-dropdown" id="side-production-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="production-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li id="financial">
<div class="icon-container">
<i class="fa fa-building" aria-hidden="true"></i>
</div>
<div class="option">
FINANCIAL
</div>
<ul class="side-dropdown" id="side-financial-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="financial-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li id="settings">
<div class="icon-container">
<i class="fa fa-cogs" aria-hidden="true"></i>
</div>
<div class="option">
SETTINGS
</div>
<ul class="side-dropdown" id="side-settings-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="settings-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<li id="administration">
<div class="icon-container">
<i class="fa fa-briefcase" aria-hidden="true"></i>
</div>
<div class="option">
ADMINISTRATION
</div>
<ul class="side-dropdown" id="side-administration-submenu">
<div class="side-square"></div>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</li>
<!-- sub menu -->
<ul class="dropdown" id="administration-submenu">
<div class="square"></div>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</ul>
<ul id="lower-list">
<li>
<div class="icon-container">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="icon-container">
<i class="fa fa-question-circle-o" aria-hidden="true"></i>
</div>
</li>
<li>
<div class="icon-container">
<i class="fa fa-th-large" aria-hidden="true"></i>
</div>
</li>
</ul>
</div>
<button id="button-expand">
<p id="expand" class="open-menu">EXPAND</p>
<i class="fa fa-chevron-right open-menu" aria-hidden="true"></i>
<p id="collapse" class="close-menu">COLLAPSE</p>
<i class="fa fa-chevron-left close-menu" aria-hidden="true"></i>
<p><!-- nothing --></p>
</button>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？