Question

我有一个想要隐藏的<aside>元素。如以下CodePen所示，边栏被放置为flexbox行子元素：https://codepen.io/pc-magas/pen/RexvXq

我希望能够隐藏它，并通过连续单击该按钮再次将其显示出来，但是我的代码无法正常工作。它只是隐藏元素，而不会在连续的点击中再次显示它。

$(document).ready(function(){
  $("#hideAside").on("click",function(){
      $('aside').toggle("slide",function(){
        var visibilityStatus=$('aside').attr("data-visible");
        alert(visibilityStatus);
        $('aside').attr('data-visible',!visibilityStatus);
      });
  })
})

.content{
  display:flex;
  flex-direction: row;
}

aside{
  display:flex;
  flex-direction: column;
  margin-left: 1px;
}

aside[data-visible="false"]{
   display: none !important;
   flex-direction: none;
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <header>
    My Page
  </header>
  <div class="content">
    <aside data-visible="true">
      Aside Content
    </aside>
    <main>
      <button id="hideAside"> Hide Aside </button>
    </main>
  </div>
</body>

Answer 1

在对CSS进行以下更改后，代码笔将按预期方式工作，只需定义一个aside并定义数据属性，然后就应该从您的代码中切换相同的代码。

aside[data-visible="true"] { 
  display: flex; 
  flex-direction: column;
}

https://codepen.io/jayas/pen/bmaZXg-您的编辑版本，仅在CSS中定义了一个

Answer 2

您实际上不需要；

css aside[data-visible="false"]
或者幻灯片function，$("aside").toggle("slide")足以使所有这些工作正常。

但是您的代码存在的问题是var visibilityStatus = $('aside').attr("data-visible")是字符串而不是布尔值。通过将其显式转换为布尔值，您的代码将按预期工作。

var visibilityStatus = $('aside').attr("data-visible") == true

在javascript中，将“假”转换为true称为强制转换，有时会导致意外的"truthy"值。

$(document).ready(function() {
  $("#hideAside").on("click", function() {
    $('aside').toggle("slide", function() {
      var visibilityStatus = $('aside').attr("data-visible") == true;
      console.log(visibilityStatus);
      $('aside').attr('data-visible', !visibilityStatus);
    });
  })
})

.content {
  display: flex;
  flex-direction: row;
}

aside {
  display: flex;
  flex-direction: column;
  margin-left: 1px;
}

aside[data-visible="false"] {
  display: none !important;
  flex-direction: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<body>
  <header>
    My Page
  </header>
  <div class="content">
    <aside data-visible="true">
      Aside Content
    </aside>
    <main>
      <button id="hideAside"> Hide Aside </button>
    </main>
  </div>
</body>

编辑下面是可以正常运行的版本，我只删除了不必要的代码。

$(document).ready(function() {
  $("#hideAside").on("click", function() {
    $('aside').toggle("slide");
  })
})

.content {
  display: flex;
  flex-direction: row;
}

aside {
  display: flex;
  flex-direction: column;
  margin-left: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<body>
  <header>
    My Page
  </header>
  <div class="content">
    <aside>
      Aside Content
    </aside>
    <main>
      <button id="hideAside"> Hide Aside </button>
    </main>
  </div>
</body>

Answer 3

    $(document).ready(function(){
      $("#hideAside").on("click",function(){
          $('aside').toggle("slide",function(){
            var visibilityStatus=$('aside').attr("data-visible");
            $('aside').attr('data-visible',visibilityStatus);
          });
      })
    })

    .content{
      display:flex;
      flex-direction: row;
    }
    
    aside{
      display:flex;
      flex-direction: column;
      margin-left: 1px;
    }
    
    aside[data-visible="false"]{
       display: none !important;
       flex-direction: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
      <header>
        My Page
      </header>
      <div class="content">
        <aside data-visible="true">
          Aside Content
        </aside>
        <main>
          <button id="hideAside"> Hide Aside </button>
        </main>
      </div>
    </body>

也许是这样吗？

如何切换<aside>元素onclick的可见性？

3 个答案: