jQuery

Question

先看看我的fiddle：my Fiddle

有更简单的方法吗？

我的方法很好，但我还不开心:)

javascript

$(document).ready(function(){
        $("#input").click(function(){
            $("#selectives").css('display', 'block'); // displays block "div #selectives" underneath
            $("input").css('borderRadius', '2px 2px 0px 0px'); // not that important.. just css
        });


        $(".auswahl").click(function(){ // .auswahl (every li element)
            var thisWord = $(this).html(); // thisWord = the word u want to get the value of
            $("#input").val(thisWord); // puts the value of "thisWord" into the #input
            $("#selectives").css('display', 'none'); // immediately if you click an li element, it should disappear
            $("input").css('borderRadius', '2px'); // not that important.. just css
        });

    });

Answer 1

这个怎么样？

$(document).ready(function(){
  var input = $("#input");
  var list = $("#selectives");
        input.click(function(){
            list.toggle(); // displays block "div #selectives" underneath
            input.toggleClass('open'); // not that important.. just css
        });


        list.on("click", "li",function(){ // .auswahl (every li element)
            input.val($(this).text()); // puts the value of "thisWord" into the #input
            list.toggle();
            input.toggleClass('open');
        });

    });

css:

.open{
  border-radius: 2px 2px 0px 0px;
}

分叉：https://jsfiddle.net/q7jg1e0a/2/

我觉得把元素保存到变量中比较好。所以你不必每次都去寻找它。（可能会减慢你的脚本速度。特别是如果你有大 DOM）。

而且我认为使用类比在代码中操纵 css 更好。在 css 中的一个地方更改它然后在代码中查找它更容易。

此外，如果您只执行打开和关闭操作，则可以使用切换开关，它会为您完成查找状态的艰苦工作。在您的代码中不需要 mega...

Answer 2

回答有点晚，但还是张贴了它而不是立即扔掉它:D。与接受的答案大致相同的推理，只是 showing/hiding （代码中的注释）

有一个单独的函数

$(function(){
 var selectives =$("#selectives"), input = $("#input").click(showHide);
  function showHide(){ //single function for the show/hide behaviour
   selectives.toggle(); //show/hide the selectives block
    input.toggleClass('droppedDown');  //put the alternate style in a css class and toggle that
  }   
  selectives.find('li').click(function(){ //every li element inside the selectives div. (Negating the need for the auswahl class)
      showHide();   
      input.val($(this).text());
 });
});

  body {height: 510px; font-family: Arial}
  #selectives {height: 10px; position: absolute; top: 31px; left: -32px; display: none;}
  #input {position: relative; }
  input:hover {cursor: pointer; }
  input::-moz-selection {background: white; color: #000}
  input {width: 107px; border-radius: 2px; border: 0.1em solid black; background-image:url(https://image.freepik.com/freie-ikonen/doppelpfeil-ios-7-schnittstelle-symbol_318-35368.jpg); -webkit-appearance: none; padding: 5px; font-size: 10px;}
  ul {margin-top: 0px;list-style-type: none; text-align: left;}
  li {width: 107px; border-color: black black orange black; border-style: solid; border-width: 1px; padding: 5px; border-radius: 0px; font-size: 10px; border-top: 0px;}
  li:last-child {border-radius: 0px 0px 2px 2px; border: 1px solid black; border-top: 0px;}
  li:first-child {border-radius: 0px; border-bottom: 1px solid orange; border-top: 0px;}
  li:hover {background-color: ghostwhite; cursor: pointer;}
    
 .droppedDown{border-radius: 2px 2px 0px 0px }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly id="input" type="text" value="Standard"> <!-- readonly = not being able to write -->
 <div id="selectives">
  <ul>
   <li>1</li> 
   <li>2</li>
   <li>3</li>
  </ul>
 </div>

jQuery - 使用 select 和选项输入，更好的方法？

jQuery - input with a select & options, better way?

input

options