Как создать выпадающий эффект переключения

Question

Мне нравится эффект выпадающего меню на этом сайте biblegateway.com. Во-первых, я не уверен, стоит ли размещать ссылки на другие сайты. У меня нет этого сайта, мне просто нравится эффект, и я пытался скопировать его для сайта, который я создаю для книг.

Эффект находится под панелью поиска при нажатии кнопки раскрывающегося списка. Он позволяет просматривать список книг, а затем позволяет просматривать главы при нажатии на любую книгу.

Извините, что вы новичок. Мне это действительно нужно, мне это нравится, и это было бы очень хорошо для моих книг. Я хотел бы перечислить их точно так же, как на сайте, для старой и новой версии справа.

Я пробовал, несмотря на то, что был новым, и вот как далеко я продвинулся. Пожалуйста, помогите мне закончить sh, что я уже потратил несколько дней, чтобы добраться до этой точки. Спасибо

$(document).ready(function() {
  $("#toggle1").click(function() {
    $(".bbl1").toggle()
  });
});

$(document).ready(function() {
  $("#toggle2").click(function() {
    $(".bbl2").toggle()
  });
});

$(document).ready(function() {
  $("li.togglebk1").click(function() {
    $(".bbl-chapters-container1").toggle()
  });
});

$(document).ready(function() {
  $("li.togglebk2").click(function() {
    $(".bbl-chapters-container2").toggle()
  });
});

https://codepen.io/danongu/pen/YzXvpoJ

Answer 1

Я не фанат переключения (). Я бы сделал так, чтобы все элементы главы отображались: ни один, когда была выбрана книга, а затем сделал бы только один правильный показ: блок.

<ul>
    <li class="book" bookid="genesis">Genesis</li>
    <li class="book" bookid="daniel">Daniel</li>
</ul>
<div id= "genesis" class="chapters" style="display:none;">
The Genesis chapters go here.
</div>
<div id= "daniel" class="chapters" style="display:none;">
The Daniel chapters go here.
</div>

$("body").on("click", ".book", function() {
  $(".chapters").css("display","none");
  var book_id = $(this).attr("bookid");
  $("#" +book_id).css("display","block");
});

Вот скрипка https://jsfiddle.net/tes7gd5h/

Answer 2

Вы можете использовать функцию переключения Clip-Path CSS Property + JS и, в основном, удвоить ее.

Чтобы понять, как работает Clip-Path, посетите специальный сайт Mozilla для объяснение или этот сайт для тестирования и игры с ним.

function togglemenu(){
  document.querySelector("#dropdown").classList.toggle("active");
  document.querySelector("#dropdownTwo").classList.remove("active")
}

document.querySelectorAll(".item").forEach(function(item){
  item.addEventListener("click", function(){
    dropTwo = document.querySelector("#dropdownTwo")
    dropTwo.classList.add("active")
    dropTwo.innerHTML = this.getAttribute("value")
  })
})

#trigger{
  background: #555;
  color: white;
  cursor: pointer;
}
 
#dropdown{
  clip-path: inset(0 0 100% 0);
  user-select: none;
  transition: 0.5s;
}
 
#dropdown.active{
  clip-path: inset(0 0 0 0);
  transition: 0.5s;
  /* user-select: all;   not necessary unless you really want the user to be able to copy the menu */ 
}

#dropdownOne{
  background: #222;
  color: white;
}

#dropdownTwo{
  background: #888;
  color: white;
  clip-path: inset(0 0 100% 0);
  user-select: none;
  transition: 0.5s;
}

#dropdownTwo.active{
  clip-path: inset(0 0 0 0);
  transition: 0.5s;
  /* user-select: all; */ 
}

<div id="trigger" onclick="togglemenu()">Click me</div>
<div id="dropdown">
  <div id="dropdownOne">
    <div class="item" value="7">Dropdown 1</div>
    <div class="item" value="2">Dropdown 2</div>
    <div class="item" value="9">Dropdown 3</div>
    <div class="item" value="1">Dropdown 4</div>
    <div class="item" value="5">Dropdown 5</div>
    <div class="item" value="8">Dropdown 6</div>
  </div>
  <div id="dropdownTwo"></div>
</div>

Две важные вещи:

1) Чтобы развернуть раскрывающийся список, необходимо использовать свойство перехода, чтобы оно исчезло.
2) Обязательно отключайте выбор пользователя при закрытом меню, иначе пользователи все равно смогут выбрать текст вашего выпадающего меню и скопировать его, даже если они его не видят.

Наконец, вероятно, есть более короткий и понятный способ сделать это с помощью библиотек и прочего. Но для обучения, делать это классическим способом c, вероятно, лучший способ понять, как все работает.

Answer 3

Во-первых, вам не нужно помещать каждую функцию внутри одной $(document).ready, вы можете поместить все в одну и ту же.

Если вы хотите создать интерфейсный веб-сайт с кодом, я рекомендую использовать интерфейсную библиотеку, такую ​​как Bootstrap / HydroUI

Answer 4

Взгляните на следующую демонстрацию JSFiddle , которую я создал. Это решение использует jQuery для анимации раскрывающегося списка.

Каждая книга в списке имеет собственный атрибут HTML book-chapters, который сообщает, сколько глав эта книга задает c есть. При щелчке по книге это значение используется для динамического создания списка глав в самом низу. Если вы храните свои книги в базе данных, вам нужно будет заполнить этот атрибут данными из вашей базы данных, а не просто «жестко закодировать».

Теперь вы можете перенести это в жизнь с реальным содержанием и приятным стилем :)