レイアウトに影響を与えることなく、オプション1、オプション2などにリンクを設定するにはどうすればよいですか？

Question

これはBootstrap 3.0テンプレートで使用されています。

オプション部分にリンクを張るまで、コードは正常に機能していました。

<li><a href="">Option 1</a></li>を試したところ、ディスプレイは基本的な状態に戻りました。

HTMLコード：

<a class="btn btn-default btn-select btn-select-light"> 
    <input type="hidden" class="btn-select-input" id="" name="" value="" /> 
    <span class="btn-select-value">Select Workshop</span> 
    <span class="btn-select-arrow glyphicon glyphicon-chevron-down"></span> 
    <ul> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
     <li>Option 4</li> 
    </ul> 
</a> 

Javascriptコード：

$(document).on('click', '.btn-select', function (e) { 
e.preventDefault(); 
var ul = $(this).find("ul"); 
if ($(this).hasClass("active")) { 
    if (ul.find("li").is(e.target)) { 
     var target = $(e.target); 
     target.addClass("selected").siblings().removeClass("selected"); 
     var value = target.html(); 
     $(this).find(".btn-select-input").val(value); 
     $(this).find(".btn-select-value").html(value); 
    } 
    ul.hide(); 
    $(this).removeClass("active"); 
} 
else { 
    $('.btn-select').not(this).each(function() { 
     $(this).removeClass("active").find("ul").hide(); 
    }); 
    ul.slideDown(300); 
    $(this).addClass("active"); 
} 

}）。

$(document).on('click', function (e) { 
var target = $(e.target).closest(".btn-select"); 
if (!target.length) { 
    $(".btn-select").removeClass("active").find("ul").hide(); 
} 

}）;

Answer 1

ネストされたリンクは、入れ子にしてはいけません<a>要素で定義された

リンクとアンカー違法です。アンカー要素は他のアンカー要素を含んではいけません。

オプション内にリンクを追加すると、同じことをしようとしています。これは正しいアプローチではありません

あなたは `li`上のクラスを削除しなかった

<div class="btn btn-default btn-select btn-select-light"> 
    <input type="hidden" class="btn-select-input" id="" name="" value="" /> 
    <span class="btn-select-value">Select Workshop</span> 
    <span class="btn-select-arrow glyphicon glyphicon-chevron-down"></span> 
    <ul> 
     <li><a href="#">Option 1</a></li> 
     <li><a href="#">Option 2</a></li> 
     <li><a href="#">Option 3</a></li> 
     <li><a href="#">Option 4</a></li> 
    </ul> 
</div>