toggleClass之后仍保留初始类样式

时间:2018-06-01 09:18:31

标签: jquery css

我有一个更多按钮,可以在单击时切换类。每个类都有一个图标(加号和减号)设置为背景图像。它会更改类和样式,除非初始类(.show)的图标在主页上始终处于活动状态,即使检查器显示正确的背景图像URL也是如此。有关为什么会在主页上而不是在任何其他页面上发生这种情况的任何想法?

    // Read more
        $(".read-more").click(function(){
          // Toggle read-more button class
          $(this).toggleClass("show hide");
    
          // Change button text depending on state
          if( $(this).hasClass("hide") ) {
            $(".read-more_button").html("Hide");
          } else if( $(this).hasClass("show") ) {
            $(".read-more_button").html("Read more");
          }
    
          // Toggle content class
          $(".content-sidebar").toggleClass("longtext");
        });
    .read-more {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 100px;
            right: 0;
            border-radius: 0 0 5px 5px;
            margin: 0;
            padding: 0 20px;
            cursor: pointer;
            background: none;
    
            &.show {
                background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255,255,255,1) 55%); /* FF3.6-15 */
                background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(255,255,255,1) 55%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%,rgba(255,255,255,1) 55%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
                button.read-more_button {
                    background: url('assets/plus-more.png') 0 / 14px no-repeat transparent;
                } 
            }
    
            &.hide {
                background: transparent;
    
                button.read-more_button {
                    background: url('assets/minus-less.png') 0 / 14px no-repeat transparent;
                }
            }
    
            button.read-more_button {
                position: absolute;
                bottom: 15px;
                left: 30px;
                right: 30px;
                border: none;
                background: none;
                padding: 0 0 0 20px;
                color: $gray-dark;
                cursor: pointer;
                outline: none;
            }
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div class="read-more show">

编辑以澄清

0 个答案:

没有答案