Переключение HTML-меню по щелчку с помощью jQuery

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

HTML

           ----------sidebar----------------
            <div class = "menu" id = "cap"><p>모자</p>
            </div>
            <div class = "menu" id = "costume"><p>상의</p>
            </div> 
            <div class = "menu" id = "outer"><p>아우터</p>
            </div> 
            <div class = "menu" id = "onepice"><p>원피스</p>
            </div> 
            <div class = "menu" id = "pant"><p>하의</p>
            </div> 
            <div class = "menu" id = "shoes"><p>신발</p>
            </div> 
            <div class = "menu" id = "bag"><p>가방</p>
            </div> 
            <div class = "menu" id = "accessory"><p>액세서리</p>
            </div> 
            <div class = "menu" id = "sports"><p>스포츠</p>
            </div>
             ----------sidebar---------------- 
            <div class = "caps" id = "menu_list">
                <div class = "top">모자</div>
                <a href = "javascript:;">볼캡</a>
                <a href = "javascript:;">비니</a>
                <a href = "javascript:;">버킷</a>
                <a href = "javascript:;">헌팅</a>
                <a href = "javascript:;">페도라</a>
                <a href = "javascript:;">트루퍼</a>    
            </div>
            <div class = "costumes" id = "menu_list">
                <div class = "top">상의</div>
                <a href = "javascript:;">반팔 </a>
                <a href = "javascript:;">긴팔</a>
                <a href = "javascript:;">후드티</a>
                <a href = "javascript:;">카라티</a>
                <a href = "javascript:;">셔츠</a>
                <a href = "javascript:;">니트</a>
            </div>        
            <div class = "outers" id = "menu_list">
                <div class = "top">아우터</div>
                <a href = "javascript:;">후드 집업</a>
                <a href = "javascript:;">가디건</a>
                <a href = "javascript:;">슈트</a>
                <a href = "javascript:;">재킷</a>
                <a href = "javascript:;">코트</a>
                <a href = "javascript:;">패딩</a>
                <a href = "javascript:;">베스트</a>
            </div> 
            <div class = "onepices" id = "menu_list">
                <div class = "top">원피스</div>
                <a href = "javascript:;l">미니 원피스</a>
                =<a href = "javascript:;">미디 원피스</a>
                =<a href = "javascript:;">맥시 원피스</a>  
            </div> 
            <div class = "pants" id = "menu_list">
                <div class = "top">바지</div>
                <a href = "javascript:;">청바지</a>
                <a href = "javascript:;">면바지</a>
                <a href = "javascript:;">반바지</a>
                <a href = "javascript:;">슬랙스</a>
                <a href = "javascript:;">레깅스</a> 
            </div> 
            <div class = "bags" id = "menu_list">
                <div class = "top">가방</div>
                <a href = "javascript:;">백 팩</a>
                <a href = "javascript:;">크로스 백</a>
                <a href = "javascript:;">숄더 백</a>
                <a href = "javascript:;">클러치 백</a>
                <a href = "javascript:;">웨이스트 백</a>            
                <a href = "javascript:;">캐리어</a>  
            </div> 
            <div class = "shoess" id = "menu_list">
                <div class = "top">신발</div>
                <a href = "javascript:;">캔버스</a>
                <a href = "javascript:;">단화</a>
                <a href = "javascript:;">런닝화</a>
                <a href = "javascript:;">축구화</a>
                <a href = "javascript:;">샌들</a> 
            </div> 
            <div class = "accessorys" id = "menu_list">
                <div class = "top">액세서리</div>
                <a href = "javascript:;">안경</a>
                <a href = "javascript:;">마스크</a>
                <a href = "javascript:;">스카프</a>
                <a href = "javascript:;">머플러</a>
                <a href = "javascript:;">넥타이</a>
                <a href = "javascript:;">장갑</a>  
            </div> 
            <div class = "sportss" id = "menu_list" >
                <div class = "top">스포츠</div>
                <a href = "javascript:;">수영용품</a>
                <a href = "javascript:;">수영복</a>
                <a href = "javascript:;">기능성 상의</a>
                <a href = "javascript:;">기능성 하의</a>
            </div>

JS

$(document).ready(function(){
$("#cap").click(function(){
    $(".caps").toggle();
});
$("#costume").click(function(){
    $(".costumes").toggle();
});
$("#outer").click(function(){
    $(".outers").toggle();
});
$("#onepice").click(function(){
    $(".onepices").toggle();
});
$("#pant").click(function(){
    $(".pants").toggle();
});
$("#bag").click(function(){
    $(".bags").toggle();
});
$("#shoes").click(function(){
    $(".shoess").toggle();
});
$("#accessory").click(function(){
    $(".accessorys").toggle();
});
$("#sports").click(function(){
    $(".sportss").toggle();
});

css

#menu_list{
position: fixed;
height: 100%;
width: 400px;
background-color: lawngreen;
display: none;}

зачем использовать так много событий кликов?

— Swati 11.12.2020 16:02

Я новичок и не знаю что делать.

— 권혁민 11.12.2020 16:11
html jquery css
11.12.2020 15:15
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
80
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

$("#cap").click(function() {
  $(".caps").toggle();
  document.querySelector(".caps").classList.add("active");
});

Ну, для чего это было? Это как знак. Мы отметили, что это меню открыто.

Тогда в нашем коде мы можем просто найти отмеченное меню и удалить класс:

$("#cap").click(function() {
  $(".caps").toggle();
  document.querySelector(".active").classList.remove("active");
  document.querySelector(".caps").classList.add("active");
});

Кажется, я понял тебя?

Спасибо за ваш комментарий.

— 권혁민 11.12.2020 15:56
11.12.2020 15:29

Это то, что вы хотите?

  • Кроме того, идентификатор должен быть уникальным для каждой «html-страницы», поэтому, если вы хотите использовать menu-list несколько раз, добавьте его в class НЕ id.

$(document).ready(function(){

  $('.menu').click(function(){
    $('.menu_list').css('display', 'none');
  });

  $("#cap").click(function(){
    $(".caps").toggle();
  });
  $("#costume").click(function(){
      $(".costumes").toggle();
  });
  $("#outer").click(function(){
      $(".outers").toggle();
  });
  $("#onepice").click(function(){
      $(".onepices").toggle();
  });
  $("#pant").click(function(){
      $(".pants").toggle();
  });
  $("#bag").click(function(){
      $(".bags").toggle();
  });
  $("#shoes").click(function(){
      $(".shoess").toggle();
  });
  
  $("#accessory").click(function(){
      $(".accessorys").toggle();
  });
  $("#sports").click(function(){
      $(".sports").toggle();
  });
 });
.menu {
  background:orange;
  width:100px;
}

.menu_list{
  position: fixed;
  right:0;
  top:0;
  height: 100px;
  width: 200px;
  background-color: green;
  display: none;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!----------sidebar---------------- -->
<div class = "menu" id = "cap"><p>모자</p></div>
<div class = "menu" id = "costume"><p>상의</p></div> 
<div class = "menu" id = "outer"><p>아우터</p></div> 
<div class = "menu" id = "onepice"><p>원피스</p></div> 
<div class = "menu" id = "pant"><p>하의</p></div> 
<div class = "menu" id = "shoes"><p>신발</p></div> 
<div class = "menu" id = "bag"><p>가방</p></div> 
<div class = "menu" id = "accessory"><p>액세서리</p></div> 
<div class = "menu" id = "sports"><p>스포츠</p></div>

<!----------sidebar---------------- -->
<div class = "caps menu_list">
    <div class = "top">모자</div>
    <a href = "javascript:;">볼캡</a>
    <a href = "javascript:;">비니</a>
    <a href = "javascript:;">버킷</a>
    <a href = "javascript:;">헌팅</a>
    <a href = "javascript:;">페도라</a>
    <a href = "javascript:;">트루퍼</a>    
</div>
<div class = "costumes menu_list">
    <div class = "top">상의</div>
    <a href = "javascript:;">반팔 </a>
    <a href = "javascript:;">긴팔</a>
    <a href = "javascript:;">후드티</a>
    <a href = "javascript:;">카라티</a>
    <a href = "javascript:;">셔츠</a>
    <a href = "javascript:;">니트</a>
</div>        
<div class = "outers menu_list">
    <div class = "top">아우터</div>
    <a href = "javascript:;">후드 집업</a>
    <a href = "javascript:;">가디건</a>
    <a href = "javascript:;">슈트</a>
    <a href = "javascript:;">재킷</a>
    <a href = "javascript:;">코트</a>
    <a href = "javascript:;">패딩</a>
    <a href = "javascript:;">베스트</a>
</div> 
<div class = "onepices menu_list">
    <div class = "top">원피스</div>
    <a href = "javascript:;l">미니 원피스</a>
    =<a href = "javascript:;">미디 원피스</a>
    =<a href = "javascript:;">맥시 원피스</a>  
</div> 
<div class = "pants menu_list">
    <div class = "top">바지</div>
    <a href = "javascript:;">청바지</a>
    <a href = "javascript:;">면바지</a>
    <a href = "javascript:;">반바지</a>
    <a href = "javascript:;">슬랙스</a>
    <a href = "javascript:;">레깅스</a> 
</div> 
<div class = "bags menu_list">
    <div class = "top">가방</div>
    <a href = "javascript:;">백 팩</a>
    <a href = "javascript:;">크로스 백</a>
    <a href = "javascript:;">숄더 백</a>
    <a href = "javascript:;">클러치 백</a>
    <a href = "javascript:;">웨이스트 백</a>            
    <a href = "javascript:;">캐리어</a>  
</div> 
<div class = "shoess menu_list">
    <div class = "top">신발</div>
    <a href = "javascript:;">캔버스</a>
    <a href = "javascript:;">단화</a>
    <a href = "javascript:;">런닝화</a>
    <a href = "javascript:;">축구화</a>
    <a href = "javascript:;">샌들</a> 
</div> 
<div class = "accessorys menu_list">
    <div class = "top">액세서리</div>
    <a href = "javascript:;">안경</a>
    <a href = "javascript:;">마스크</a>
    <a href = "javascript:;">스카프</a>
    <a href = "javascript:;">머플러</a>
    <a href = "javascript:;">넥타이</a>
    <a href = "javascript:;">장갑</a>  
</div> 
<div class = "sports menu_list">
    <div class = "top">스포츠</div>
    <a href = "javascript:;">수영용품</a>
    <a href = "javascript:;">수영복</a>
    <a href = "javascript:;">기능성 상의</a>
    <a href = "javascript:;">기능성 하의</a>
</div>

Спасибо за ваш комментарий. cablemaker.xyz Вот так я хочу. Если вы попросите слишком много, вы можете отказаться. Она исчезает при нажатии того же меню.

— 권혁민 11.12.2020 15:56
11.12.2020 15:41
Ответ принят как подходящий

Вам не нужно использовать так много событий щелчка, вместо этого дайте настраиваемый атрибут вашему элементу div, где это значение совпадает со значением idmenu. Затем просто получите это значение id всякий раз, когда .menu нажимается, и покажите div, где значение соответствия, т.е.: $(".menu_list[data-id = " + id + "]").

Демонстрационный код: 

$('.menu').click(function() {
  $('.menu_list').css('display', 'none'); //hide
  //check if menu has active clas
  if ($(this).hasClass("active")) {
    //remove same
    $(this).removeClass("active")
  } else {
    //remove from other menus
    $(".menu").not(this).removeClass("active")
    $(this).addClass("active") //add active
    var id = $(this).attr("id");
    //show div where data-id matches
    $(".menu_list[data-id = " + id + "]").css('display', 'block');
  }
});
.menu_list {
  height: 250%;
  width: 400px;
  background-color: lawngreen;
  display: none;
}

.active {
  color: red
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
----------sidebar----------------
<div class = "menu" id = "cap">
  <p>모자</p>
</div>
<div class = "menu" id = "costume">
  <p>상의</p>
</div>
<div class = "menu" id = "outer">
  <p>아우터</p>
</div>
<div class = "menu" id = "onepice">
  <p>원피스</p>
</div>
<div class = "menu" id = "pant">
  <p>하의</p>
</div>
<div class = "menu" id = "shoes">
  <p>신발</p>
</div>
<div class = "menu" id = "bag">
  <p>가방</p>
</div>
<div class = "menu" id = "accessory">
  <p>액세서리</p>
</div>
<div class = "menu" id = "sports">
  <p>스포츠</p>
</div>
----------sidebar----------------
<!--added data-id which macthes id of menu-->
<div data-id = "cap" class = "caps menu_list">
  <div class = "top">모자</div>
  <a href = "javascript:;">볼캡</a>
  <a href = "javascript:;">비니</a>
  <a href = "javascript:;">버킷</a>
  <a href = "javascript:;">헌팅</a>
  <a href = "javascript:;">페도라</a>
  <a href = "javascript:;">트루퍼</a>
</div>
<div data-id = "cap" class = "costumes menu_list">
  <div class = "top">상의</div>
  <a href = "javascript:;">반팔 </a>
  <a href = "javascript:;">긴팔</a>
  <a href = "javascript:;">후드티</a>
  <a href = "javascript:;">카라티</a>
  <a href = "javascript:;">셔츠</a>
  <a href = "javascript:;">니트</a>
</div>
<div data-id = "outer" class = "outers menu_list">
  <div class = "top">아우터</div>
  <a href = "javascript:;">후드 집업</a>
  <a href = "javascript:;">가디건</a>
  <a href = "javascript:;">슈트</a>
  <a href = "javascript:;">재킷</a>
  <a href = "javascript:;">코트</a>
  <a href = "javascript:;">패딩</a>
  <a href = "javascript:;">베스트</a>
</div>
<div data-id = "onepice" class = "onepices menu_list">
  <div class = "top">원피스</div>
  <a href = "javascript:;l">미니 원피스</a> =
  <a href = "javascript:;">미디 원피스</a> =
  <a href = "javascript:;">맥시 원피스</a>
</div>
<div data-id = "pant" class = "pants menu_list">
  <div class = "top">바지</div>
  <a href = "javascript:;">청바지</a>
  <a href = "javascript:;">면바지</a>
  <a href = "javascript:;">반바지</a>
  <a href = "javascript:;">슬랙스</a>
  <a href = "javascript:;">레깅스</a>
</div>
<div data-id = "bag" class = "bags menu_list">
  <div class = "top">가방</div>
  <a href = "javascript:;">백 팩</a>
  <a href = "javascript:;">크로스 백</a>
  <a href = "javascript:;">숄더 백</a>
  <a href = "javascript:;">클러치 백</a>
  <a href = "javascript:;">웨이스트 백</a>
  <a href = "javascript:;">캐리어</a>
</div>
<div data-id = "shoes" class = "shoess menu_list">
  <div class = "top">신발</div>
  <a href = "javascript:;">캔버스</a>
  <a href = "javascript:;">단화</a>
  <a href = "javascript:;">런닝화</a>
  <a href = "javascript:;">축구화</a>
  <a href = "javascript:;">샌들</a>
</div>
<div data-id = "accessory" class = "accessorys menu_list">
  <div class = "top">액세서리</div>
  <a href = "javascript:;">안경</a>
  <a href = "javascript:;">마스크</a>
  <a href = "javascript:;">스카프</a>
  <a href = "javascript:;">머플러</a>
  <a href = "javascript:;">넥타이</a>
  <a href = "javascript:;">장갑</a>
</div>
<div data-id = "sports" class = "sportss menu_list">
  <div class = "top">스포츠</div>
  <a href = "javascript:;">수영용품</a>
  <a href = "javascript:;">수영복</a>
  <a href = "javascript:;">기능성 상의</a>
  <a href = "javascript:;">기능성 하의</a>
</div>

Это ответ, который я хочу. Большое спасибо. Тем не менее, я все еще новичок. Вам нужно понять ответ.

— 권혁민 11.12.2020 16:24

Привет, дайте мне знать, если у вас есть какие-либо сомнения в приведенном выше демонстрационном коде.

— Swati 11.12.2020 17:35

Спасибо. Завтра приду задавать вопросы.

— 권혁민 11.12.2020 18:05

Спасибо, вчера я не понимал JavaScript, поэтому $('.menu_list').css('display','none'); Почему это сложилось? .menu_list уже скрыт.

— 권혁민 12.12.2020 10:25

привет, каждый раз, когда вы нажимаете на меню, новое menu_list должно отображаться, поэтому эта строка будет скрывать другой список меню, а затем использование $(".menu_list[data-id = " + id + "]").css('display', 'block'); покажет только список меню, который был нажат.

— Swati 12.12.2020 13:46

Выполняет ли JavaScript сначала оператор if?

— 권혁민 12.12.2020 14:35

да, сначала выполняется if, затем часть (если условие не выполняется)

— Swati 12.12.2020 14:44

$(".menu").not(this).removeClass("active") Что это значит?

— 권혁민 12.12.2020 15:08

Давайте продолжим обсуждение в чате.

— Swati 12.12.2020 15:10
11.12.2020 16:12

Другие вопросы по теме

Получение щелкнутого элемента из заполненного списка ajax
Добавление/удаление ключевых слов в текстовом поле не работает на мобильных телефонах (jquery)
JQuery: как получить данные JSON таблицы с пользовательскими значениями заголовка
Получение объекта ошибки HTMLHeadingElement при использовании document.querySelectorAll
Сортировка файлов с помощью перетаскивания по имени в JavaScript
Как изменить атрибуты данных при перетаскивании пользовательского интерфейса Jquery?
Почему моя форма не передает идентификатор контроллеру?
Застрял при попытке воспроизвести определенный CSS-переход (CTA-кнопка, которая перемещается в нижний угол страницы при прокрутке вниз и фиксируется)
Переключить div в зависимости от значения флажка - с анимацией
Приклейте повернутый дочерний div к нижней части родительского

Похожие вопросы

Макет страницы HTML / CSS — расширение DIV
Увеличить интерактивную область кнопки ввода даты
Наведите курсор на каждый div, кроме того, который завис
Тень макета каменной кладки обрезается
Кнопка «Удалить» удаляет элемент перед целевым элементом
Может ли кто-нибудь объяснить мне, почему моя переменная «сумма» не вычисляет сумму массива «arrPrice»?
Выравнивание результатов поиска под панелью поиска
Как с помощью CSS сделать линию фокусировки невидимой?
Замена ввода в поле поиска событием onclick не обновляет список
Как пересоздать таблицу по кнопке с помощью HTML?