文章/答案/技术大牛

发布

社区首页 >问答首页 >用jQuery点击HTML菜单

问用jQuery点击HTML菜单
EN

Stack Overflow用户

提问于 2020-12-11 14:15:38

回答 3查看 79关注 0票数 1

我是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>

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

html

jquery

css

回答 3

Stack Overflow用户

回答已采纳

发布于 2020-12-11 15:12:35

您不需要使用太多的单击事件，而是将自定义属性提供给您的div元素，该值与menu .Then的id值匹配，只要单击.menu并显示匹配值所在的div，即：$(".menu_list[data-id=" + 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>

票数 0

Stack Overflow用户

发布于 2020-12-11 14:29:47

当切换时，可以向其添加类，如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");
});

我想我理解你了？

票数 0

Stack Overflow用户

发布于 2020-12-11 14:41:20

这是你想要的吗？

此外，id在“html页面”中应该是唯一的，因此，如果您想多次使用id.，请将其添加到class而不是

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/65252962

复制

相似问题

问用jQuery点击HTML菜单
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jQuery点击HTML菜单EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用jQuery点击HTML菜单
EN