css 转换属性未按预期处理元素

Question

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

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

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

问题是按钮上的文本 "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"（取决于导航栏是展开还是折叠）。

请告诉我我做错了什么。是否有某种 conflict/overriding 正在发生？

谢谢！

Answer 1

But then when I wrote the following Jquery code, the text no longer appears rotated.

无需更改您的 jQuery 代码或 HTML。

您只需添加到 #expand, #collapse{:

writing-mode: vertical-rl;

writing-mode: The property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

vertical-lr: Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line

在这种情况下你需要改变：

transform: rotate(-90deg)

至：

transform: rotate(-180deg)

因此你的 css class 是：

#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>

Answer 2

将 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','');

css 转换属性未按预期处理元素

css transform property not working on element as expected

css

jquery

css-transforms

css 转换 属性 未按预期处理元素

css transform property not working on element as expected

css

jquery

css-transforms

css 转换属性未按预期处理元素