Bật tắt menu con và nếu con nhấp vào trang

Question

Tôi đã tạo một menu chuyển đổi đơn giản khi được nhấp một lần hiển thị danh sách các phần tử con và nếu được nhấp lại sẽ ẩn các phần tử hiển thị đó.

Nếu phần tử con được nhấp vào tuy nhiên tôi muốn nó truy cập trang đó chỉ có vẻ như tôi không thể làm cho nó hoạt động? Là nó để làm với ngăn chặn của tôi Mặc định?

// Language select in global nav 
$('.sub-lang').on('click', function(e) { 

if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) { 
    $(this).removeClass('active'); 
    $(this).css('height', 'auto'); 
    $(this).children('ul').hide(); 
} else { 
    $(this).addClass('active'); 
    $(this).css('height', $(this).find('ul').height() + 65); 
    $(this).children('ul').show(); 
} 

e.preventDefault(); 
}); 

Đây là JsFiddle

Answer 1

Tại sao bạn không đơn giản chuyển đổi yếu tố menu chính của bạn trong thẻ đoạn? hoặc bạn có thể đặt # bên trong phần tử trình đơn chính của bạn và xóa ngăn chặn mặc định. Bằng cách này bạn không cần phải ngăn chặn mặc định trên các yếu tố chính của bạn.

Mặc dù google.com không tải bên trong iFrame, bạn có thể kiểm tra fiddle này. Nó hoạt động.

Nhìn vào này (với # trong neo) fiddle

HTML

<ul style=" "> 
    <li class="sub-lang"> 
    <a href="#">English</a> 
    <ul style=""> 
     <li><a href="http://www.google.com">International</a></li> 
     <li><a href="">UK &amp; Ireland</a></li> 
    </ul> 
    </li> 
    <li class="sub-lang"> 
    <a href="#">Espanol</a> 
    <ul style=""> 
     <li><a href="/es-es/">Español</a></li> 
     <li><a href="http://www.google.com">España</a></li> 
    </ul> 
    </li> 
    <li class="sub-lang"> 
    <a href="#">Francais</a> 
    <ul style=""> 
     <li><a href="/fr-fr/">Français</a></li> 
     <li><a href="http://www.google.com">France</a></li> 
    </ul> 
    </li> 
</ul> 

Answer 2

Đây Kiểm tra This Out.

Giải thích.

Thay vì ủy quyền sự kiện trên toàn bộ li, tôi đã ràng buộc sự kiện này với tất cả các con 01 li ngay lập tức <a> và sau đó ngăn việc truyền cho yếu tố cụ thể đó. Vì vậy, chúng tôi không phải tìm ra cách để ngăn chặn sự kiện tuyên truyền (click trong trường hợp của chúng tôi) cho phần tử con.

Ngoài ra JSFiddle có thể đang tải các sự cố bên ngoài iframe, vì vậy hãy kiểm tra giải pháp ra here.

Answer 3

Thêm dòng này trước khi mã của bạn

$('.sub-lang > a').removeAttr('href'); 

Di

e.preventDefault(); 

này sẽ làm việc tốt

Answer 4

Bạn nên thêm một điều kiện cho điều đó.

if($(e.target).parent().hasClass('sub-lang')) 

Nó sẽ cho phép bạn nhấp vào menu con.

// Language select in global nav 
 
$('.sub-lang').on('click', function(e) { 
 
    
 
if($(e.target).parent().hasClass('sub-lang')){ 
 
    
 
    if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) { 
 
     $(this).removeClass('active'); 
 
     $(this).css('height', 'auto'); 
 
     $(this).children('ul').hide(); 
 
    } else { 
 
     $(this).addClass('active'); 
 
     $(this).css('height', $(this).find('ul').height() + 65); 
 
     $(this).children('ul').show(); 
 
    } 
 
    e.preventDefault(); 
 
    } 
 
});

ul li ul { 
 
    display: none; 
 
    z-index: 2; 
 
    right: 0; 
 
    background-color: #fff; 
 
    width: 250px; 
 
} 
 
ul li.active ul { 
 
    display: block; 
 
    text-align:left; 
 
    background: #f1f1f1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul style=" "> 
 
    <li class="sub-lang"> 
 
    <a href="">English</a> 
 
    <ul style=""> 
 

 
     <li><a href="http://www.google.com" traget="_blank">International</a></li> 
 

 
     <li><a href="">UK &amp; Ireland</a></li> 
 

 
    </ul> 
 
    </li> 
 

 
    
 
    <li class="sub-lang"> 
 
    <a href="/es-es/">Español</a> 
 
    <ul style=""> 
 

 
     <li><a href="http://www.google.com">España</a></li> 
 

 
    </ul> 
 
    </li> 
 

 
    <li class="sub-lang"> 
 
    <a href="/fr-fr/">Français</a> 
 
    <ul style=""> 
 

 
     <li><a href="http://www.google.com">France</a></li> 
 

 
    </ul> 
 
    </li> 
 

 
</ul>

Working Fiddle

Hy vọng nó giúp.

Answer 5

Tôi nghĩ bạn phải thêm stopPropagation vào các mục trong danh sách bên trong của mình.

$('.sub-lang ul li').on('click', function(e) { 
 
    e.stopPropagation(); 
 
});