Question

首先，看看我的小提琴：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中的一个地方更改它然后在代码中查找它会更容易。

此外，如果您只打开和关闭，您可以使用切换，它将为您找到状态的艰苦工作。在您的代码中不是必需的......

Answer 2

回答有点迟，但无论如何都要张贴而不是把它扔掉：D。与接受的答案大致相同的推理，只是显示/隐藏的单独功能（代码中的注释）

＆＃13;

$(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());
	});
});

＆＃13;

		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 }

＆＃13;

<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>

＆＃13;

jQuery - 使用select＆amp; amp;选项，更好的方法？

2 个答案: