css 转换属性未按预期在元素上工作答案

【问题标题】：css transform property not working on element as expectedcss 转换属性未按预期在元素上工作
【发布时间】：2017-09-12 17:32:09
【问题描述】：

我有一个导航侧边栏，单击按钮时会展开，再次单击同一按钮时会收缩。

当导航栏收起时，按钮上的文字显示EXPAND >

当导航栏展开时，按钮上的文字会显示COLLAPSE

看到这个codepen link

问题是按钮上的文本“EXPAND”或“COLLAPSE”水平显示，而我希望它们像这样垂直显示。

我通过以下方式使用 CSS 转换属性将文本旋转 -90 度，最初效果很好。

#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”（取决于导航栏是展开还是折叠）。

请告诉我我做错了什么。是否发生了某种冲突/压倒一切？

谢谢！

【问题讨论】：

是display:unset的用法，看我的回答。

标签： jquery css css-transforms

【解决方案1】：

将unset 值替换为空白""。当您使用unset 时，看起来样式就像连锁反应（可能是级联？）。无论如何，在display:none 之间切换时，通常使用"" 空白，因为这将触发默认display(initial)

CODEPEN

    $('.open-menu').css('display','');
    $('.close-menu').css('display','none');

} else {    // Expanded

    $('.open-menu').css('display','none');
    $('.close-menu').css('display','');

【讨论】：

【解决方案2】：

但是当我编写以下 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>

【讨论】：