Как переключить <div>теги, скрытые и видимые с <span>и JS? - PullRequest
Новая
       3

Как переключить <div>теги, скрытые и видимые с <span>и JS?

0 голосов
/ 29 апреля 2020

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

<div class="search">
<ul><a href="bashEmulator.html">Bash Shell Emulator</a></ul>
<ul><a href="bashShellUseHow.html">How to use bash shell </a></ul>

и многое другое для это. Но как я могу переключить его, чтобы он был скрыт и отображался с JS и <span>? Большое спасибо, Ring Games

Ответы [ 3 ]

0 голосов
/ 29 апреля 2020

Вот Ваниль Javascript без использования большой библиотеки 

<p>
  <a class="toggle" href="#example">Toggle Div</a>
</p>
<div  id="example">
  <ul><a href="bashEmulator.html">Bash Shell Emulator</a></ul>
  <ul><a href="bashShellUseHow.html">How to use bash shell </a></ul>
</div>
<script>
var show = function (elem) {
    elem.style.display = 'block';
};

var hide = function (elem) {
    elem.style.display = 'none';
};

var toggle = function (elem) {

    // If the element is visible, hide it
    if (window.getComputedStyle(elem).display === 'block') {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);

};

// Listen for click events
document.addEventListener('click', function (event) {

    // Make sure clicked element is our toggle
    if (!event.target.classList.contains('toggle')) return;

    // Prevent default link behavior
    event.preventDefault();

    // Get the content
    var content = document.querySelector(event.target.hash);
    if (!content) return;

    // Toggle the content
    toggle(content);

}, false);
</script>
0 голосов
/ 29 апреля 2020

Привет, вы можете использовать переключатель для добавления и удаления класса, а с помощью класса вы можете скрыть элементы внутри поиска, это пример: 

const searchElement = document.getElementById("search");
const toggleElement = document.getElementById("toggle-visibility");

toggleElement.addEventListener("click", toggleSearchVisibility);

function toggleSearchVisibility() {
  searchElement.classList.toggle("hide-element")
}
.hide-element{
  display: none;
}
<div id="search">
  <ul><a href="bashEmulator.html">Bash Shell Emulator</a></ul>
  <ul><a href="bashShellUseHow.html">How to use bash shell </a></ul>
</div>

<span id="toggle-visibility">Click me!</span>
0 голосов
/ 29 апреля 2020

Я настоятельно рекомендую вам использовать библиотеку JQuery. Это очень просто, все, что вам нужно сделать, это добавить следующий скрипт к вашему тегу <head>: 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

Тогда это будет просто: 

$("#clickedElementThatWillHide").click(function(){
    $("span").hide();
  });

. W3Schools

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

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

...