Как я могу переключить видимость элемента <aside>по клику? - PullRequest
Новая
       1

Как я могу переключить видимость элемента <aside>по клику?

0 голосов
/ 16 октября 2018

У меня есть элемент <aside>, который я хочу скрыть.Боковая панель размещается как дочерняя строка строки flexbox, как показано в следующем CodePen: 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>

Ответы [ 3 ]

0 голосов
/ 16 октября 2018

Вам на самом деле не нужно;

  1. CSS aside[data-visible="false"]
  2. Или слайд function, $("aside").toggle("slide") достаточно, чтобы все это заработало.

Но проблема с вашим кодом в том, что var visibilityStatus = $('aside').attr("data-visible") является строкой, а не логическим значением.При явном преобразовании его в логическое значение ваш код будет работать, как и ожидалось. 

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

Преобразование в javascript из «false» в true описывается как принуждение, и иногда может привести к неожиданному "правдивые" значения. 

$(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>
0 голосов
/ 16 октября 2018 

    $(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>

Может вот так?

0 голосов
/ 16 октября 2018

Кодовое перо работает, как и ожидалось, со следующим изменением вашей CSS, просто имея один aside с определенным атрибутом данных и переключая то же самое из вашего кода, будет и должен, как вы уже делаете.

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

https://codepen.io/jayas/pen/bmaZXg - ваша отредактированная версия, в которой определен только один отступ в CSS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...