JQUERY Two Clicks Issue

Question

현재 메뉴와 관련된 몇 가지 문제가 있습니다. 요구 사항에 따라 매우 기본적인 것입니다.

ISSUE 일단 메뉴 버튼을 클릭 서브 메뉴를 열 수있는 사용자는, 사용자가 해당 서브 메뉴를 열고 다음 버튼을 클릭

, 이것은 메뉴 옵션의 개수에 따라 반복된다 . 일단 사용자가 클릭하면 다른 메뉴 버튼을 한 번 클릭하면 열리지 않습니다. 사용자가 두 번째 버튼을 클릭하면 열립니다. 따라서 메뉴를 한 번 실행 한 후에는 하나의 사용자 클릭이 아니라 두 번의 사용자 클릭에만 반응합니다. 이 문제는 다른 영역에서 발생합니다.

는 내 클릭 핸들러와 이벤트 버블 링하지만 함께 할 수있는 그 무언가를 의심 내 JQuery와 지식 내가 포인터의 부부와 함께 할 수 있도록 가르쳐 자체입니다 :

JQuery와 코드

$(document).ready(function(){ 
$('#menu span').hide(); 
$('#menu li').not('.sub_menu').toggle(function(){ 
    //$('#menu span').hide(); 
    $('.open').hide(); 
    //$(this).next().not('#mm_choice, .sub_menu').show(); 
    $(this).nextUntil('li').not('#mm_choice, .sub_menu').show().addClass('open'); 
    }, function(){ 
    //$(this).next().not('#mm_choice, .sub_menu').hide(); 
    //$(this).nextUntil('li').not('#mm_choice, .sub_menu').hide().removeClass('open'); 
    $('.open').removeClass('open').hide(); 
     }); 
}); 

HTML 소스 코드

<div id="menu" title="Main Menu"> 
<ul id="m_choices" class="main_menu"> 

<li id="mm_choice" title="Customer Segmentation Menu">Customer Segmentation</li> 

    <span id="c_seg"><li class="sub_menu" title="Cust Seg Menu1">Cust Seg Menu1</li><li id="c_seg" class="sub_menu" title="Cust Seg Menu2">Cust Seg Menu2</li><li id="c_seg" class="sub_menu" title="Cust Seg Menu3">Cust Seg Menu3</li></span> 

<li id="mm_choice" title="Industry Menu">Industry Selection</li> 

    <span id="all_ind"><li class="sub_menu" title="View All Industries">View All</li></span> 

    <span id="spec_ind"><li class="sub_menu" title="View information on a specific Industry">View Specific Industry</li></span> 

<li id="mm_choice" title="Customer Satisfaction Menu">Customer Satisfaction</li> 

    <span id="all_cs"><li class="sub_menu" title="View every industry's CS survey results">View All</li></span> 

    <span id="spec_cs"><li class="sub_menu" title="View a specific industry's CS survey results">View Specific Industry</li></span> 

<li id="mm_choice" title="Performance Measures Menu">Performance Measures</li> 

    <span id="all_pm"><li class="sub_menu" title="Trend Menu">View All</li></span> 

    <span id="spec_pm"><li class="sub_menu" title="Trend Menu">View Specific Industry</li></span> 

<li id="mm_choice" title="Business Performance Menu">Business Performance</li> 

    <span id="all_bp"><li class="sub_menu" title="Bus Perf Menu">View All</li></span> 

    <span id="spec_bp"><li class="sub_menu" title="Bus Perf Menu">View Specific Industry</li></span> 

<li id="mm_choice" title="Trend Analysis Menu">Trend Analysis Menu</li> 

    <span id="all_trends"><li class="sub_menu" title="Trend Menu">View All</li></span> 

    <span id="spec_trends"><li class="sub_menu" title="Trend Menu">View Specific Industry Trends</li></span> 
</ul> 
</div> 

menu.php 파일 tml 마크 업)가 index.php 파일에 임포트됩니다 (PHP include(); 사용). JQuery 파일은 헤더의 index.php로 가져온 declerations.php로 가져옵니다. Declerations.php는 필요한 모든 JQuery 라이브러리를 포함합니다. UI 애니메이션을 나중에 추가하여 .show() 및 .hide() 메소드에 대해 자세히 설명합니다.

Answer 1

메뉴 대신 토글을 사용하는 대신 .click() 메서드를 사용하는 것이 좋습니다. 클릭하면 약간의 일이 발생하는 것을 제어 할 수 있습니다. Toggle()은 한 번의 클릭으로 두 개의 다른 상태를 원하지만 복잡한 메뉴의 경우 가장 좋은 방법이 아닐 때 유용합니다.

또한 2 차 탐색을 span 태그와 list-item 안의 개별 요소로 묶습니다. 이것은 잘못된 HTML 마크 업이며 특정 브라우저에서 렌더링 문제를 일으킬 수 있습니다. 그 기간을 ul로 바꾸는 것이 좋습니다