使DIV和UL的行爲像一個SELECT元素

我想要做的是將<span class="hideSelect">元素的「我的下拉列表」文本替換爲單擊<li>的文本，以使其工作像<select>元素。使DIV和UL的行爲像一個SELECT元素

CSS：

.myDrop { 
    border: 1px solid #ddd; 
    border-radius: 3px; 
    padding: 5px 10px; 
    max- width: 100%; 
    min-width: 100%; 
    vertical-align: middle; 
} 

.mydrop ul { 
    display: none; 
    background: #fff; 
    border: 1px solid #ddd; 
    border-radius: 3px; 
    max-height: 250px; 
    overflow: auto; 
} 

.mydrop ul li { 
    padding: 5px 10px; 
} 

.mydrop ul li:hover { 
    background: #ddd; 
}

的JavaScript：

$(".mydrop").click(function(e) { 
    e.stopPropagation(); 
    $(".mydrop>ul").stop().slideToggle(500); 
    $(document).click(function(){ 
     $(".mydrop>ul").hide(); 
    }); 
    }); 
    $(".mydrop>ul li").click(function() { 
    $(".hideSelect").hide(); 
    });

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <div class="mydrop"> 
     <div class="myDrop"> 
      <span class="hideSelect"> 
       <span id="caption">my dropdown</span> 
       <span class="pull-right"><i class="fa fa-caret-down"></i> 
    </span> 
      </span> 
     </div> 
     <ul id="options"> 
      <li class="visilkl">Hot Dog, Fries and a Soda</li> 
      <li>Burger, Shake and a Smile</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>

來源

2017-08-11 Samar

什麼需要隱藏的部分代碼???與id mydrop或myDrop的div？ –

希望你使用選擇框，對嗎？當我們點擊時，我想做同樣的事情，就像在選擇框上發生的一樣，可見的東西隱藏並且點擊的東西在選擇框上可見。 – Samar

如果我理解正確的話，你要隱藏，因此my dropdown將被隱藏的<span class="hideSelect">內容曾經已從<ul>中選擇了一個值。

你可以做到這一點，像這樣：

$(".mydrop").click(function(e) { 
    e.stopPropagation(); 
    $(".mydrop>ul").stop().slideToggle(500); 
    $(document).click(function() { 
     $(".mydrop>ul").hide(); 
    }); 
}); 
$(".mydrop>ul li").click(function() { 
    $(".hideSelect").text(this.innerHTML); //Get the text from the clicked li and write it to the span with class hideSelect 
})

的HTML不會改變

對於一個演示，看到這個JSFiddle

希望這有助於！

來源

2017-08-11 12:31:24 Simplicity

我已經對你的html做了一些改動，但是這允許JS工作。

，所以我說，圍繞「我的下拉」一個跨度，以便它現在

<span class="dropText">my dropdown</span>

這讓我們改下更容易一些。

一旦你這樣做，你可以將它添加到您的網頁，它應該工作

$(document).ready(function() { 
    var showingDropdown = false; 

    $(".hideSelect").click(function() { 
     showingDropdown = true; 
     $(".mydrop ul").show(); 
    }); 

    $(".mydrop ul li").click(function() { 
     if(showingDropdown) { 
      showingDropdown = false; 
      $(".dropText").text($(this).text()); 
      $(".mydrop ul").hide(); 
     } 
    }); 
});

Here is a jsfiddle of it working

來源

2017-08-11 12:31:26 y0hami

你去那裏：https://jsfiddle.net/athrpcxs/

這是你需要什麼？

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-3"> 
     <div class="mydrop"> 
     <div class="myDrop"> 
      <span class="hideSelect"> 
       <span id="caption">my dropdown</span> 
       <span class="pull-right"><i class="fa fa-caret-down"></i> 
    </span> 
      </span> 
     </div> 
     <ul id="options"> 
      <li class="visilkl">Hot Dog, Fries and a Soda</li> 
      <li>Burger, Shake and a Smile</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
      <li>Sugar, Spice and all things nice</li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div>

的JavaScript：

$(".mydrop").click(function(e) { 
    e.stopPropagation(); 
    $(".mydrop>ul").stop().slideToggle(500); 
    $(document).click(function(){ 
     $(".mydrop>ul").hide(); 
    }); 
    }); 
    $(".mydrop > ul li").click(function() { 
    $("#caption").text($(this).text()); 
    });

來源

2017-08-11 12:35:21

試試這個

$("li").click(function(){ 
    $(this).siblings().hide(); 
})

來源

2017-08-11 12:41:18

使DIV和UL的行爲像一個SELECT元素

回答

相關問題