클릭 가능한 드롭 다운 메뉴 javascript

자바 스크립트를 사용하여 웹 페이지에서 3 개의 클릭 가능한 드롭 다운 메뉴 버튼을 만들었습니다. 하나의 버튼을 클릭하면 스크립트가 잘 작동합니다. 다음 메뉴가 표시됩니다. 다른 버튼을 누르면 다음과 같은 메뉴가 표시됩니다. 그러나 이전 메뉴는 여전히 존재합니다.클릭 가능한 드롭 다운 메뉴 javascript

내 스크립트는 다음과 같습니다. 누군가 나를 도울 수 있기를 바랍니다. 고맙습니다!

<script type="text/javascript" > 
$(document).ready(function() { 

    $(".account").click(function() { 
     var X = $(this).attr('id'); 
     if (X == 1) { 
      $(".submenu").hide(); 
      $(this).attr('id', '0'); 
     } else { 
      $(".submenu").show(); 
      $(this).attr('id', '1'); 
     } 

    }); 

    //Mouse click on sub menu 
    $(".submenu").mouseup(function() { 
     return false 
    }); 

    //Mouse click on my account link 
    $(".account").mouseup(function() { 
     return false 
    }); 

    //Document Click 
    $(document).mouseup(function() { 
     $(".submenu").hide(); 
     $(".account").attr('id', ''); 
    }); 
}); 
</script> 

// CSS 

.dropdown 
{ 
color:#000; 
margin: 0px 22px 0 0; 
width: 300px; 
height: 30px; 
text-align:center; 
} 
.submenu 
{ 
background:#FFF ; 
position: absolute; 
top: 118px; 
left: 515px; 
z-index: 100; 
width: 250px; 
display: none; 
border-radius: 6px; 
border: outset 2px #0066FF; 
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05); 
} 

.dropdown li a 
{ 
color:#555555; 
display: block; 
font-family: arial; 
font-weight: bold; 
padding: 6px 15px; 
cursor: pointer; 
text-decoration:none; 
margin-top:-5px; 
} 

.dropdown li a:hover 
{ 
background:#155FB0; 
color: #FFFFFF; 
text-decoration: none; 
} 
a.account 
{ 
font-size: 18px; 
line-height: 10px; 
color: #000; 
border: ridge 2px #0066FF; 
position: absolute; 
z-index: 110; 
display: block; 
padding: 11px 0 0 0px; 
height: 20px; 
width: 300px; 
margin: 0px 0 0 0px; 
text-align:center; 
text-decoration: none; 
background: url(images-new/arrow.png) 275px 9px no-repeat; 
cursor:pointer; 
} 
.root 
{ 
list-style:none; 
margin:0px; 
padding:0px; 
font-size: 11px; 
padding: 11px 0 0 0px; 
border-top:1px solid #dedede; 
} 

// html 

<div class="dropdown"> 
<a class="account" >My Account</a> 

<div class="submenu"> 
<ul class="root"> 
<li ><a href="#Dashboard" >Dashboard</a></li> 
<li ><a href="#Profile" >Profile</a></li> 
<li ><a href="#settings">Settings</a></li> 
<li ><a href="#feedback">Send Feedback</a></li> 
</ul> 
</div> 

</div>

출처

2014-05-23 user3669911

에 오신 것을 환영합니다 SO를. 해당 HTML 및 CSS없이이 문제를 해결하기 위해 커뮤니티를 어떻게 생각하십니까? [JSFiddle] (http://jsfiddle.net)이 더 좋을 것입니다. –

정보에서 누락 된 부분이있는 것 같습니다. 이 코드는 .account라는 클래스와 .submenu라는 클래스를 참조합니다. 우리는 각 클래스에 얼마나 많은 dom 항목이 있는지 알 수 없습니다. id 속성을 변경하는 mouseup 및 mousedown 이벤트가 혼란 스럽습니다 ... 여기서 무엇을하려고합니까? –

내 개인적인 추천 JS & CSS의 조합으로이 작업을 수행하는 것입니다.

당신은 당신의 요소를 숨기고 보여 활성 클래스를 사용해야합니다 :

//JS 
$('.menu a').on('click', function({ 
    $('.menu a').removeClass('active'); 
    $(this).addClass('active'); 
}); 

// CSS 
.active .submenu { 
    display: block; 
}

출처

2014-05-23 18:27:56

클릭 가능한 드롭 다운 메뉴 javascript

답변

관련 문제