Jquery+HTML+CSSはドロップダウンリスト機能を実装します

今回は、Jquery+HTML+CSSでドロップダウンリスト機能を実装するための注意事項を紹介します。実際のケースは次のとおりです。見てみましょう。

nbsp;html>


<meta>
<title>fruit</title>
<style>
.hide {
 display: none;
}
p {
 float: left;
 width: 100%;
}
.selector-containter {
 margin-bottom: 10px;
}
.selector {
 width: 200px;
 background: #FFF;
 border: 1px solid #DDD;
}
.selector-hint {
 width: 178px;
 border: 1px solid #DDD;
}
.selector-expand {
 width: 8px;
 border: 1px solid #DDD;
}
.selector-collapse {
 width: 8px;
 border: 1px solid #DDD;
}
</style>
<script></script>
<script>
$(document).ready(function() {
  //使用on方法，采用事件委派机制，selector-option-container中的内容为后续动态追加
  $(&#39;.selector&#39;).on(&#39;click&#39;, &#39;.selector-expand&#39;, function() {
    $(this).parent().children(&#39;.selector-option-container&#39;).children().remove();
    $(this).parent().children(&#39;.selector-option-container&#39;).append(&#39;<p><input type="checkbox" name="fruitGroup" class="selector-checkbox"/><p class="selector-option">apricot&#39;);
    $(this).parent().children(&#39;.selector-option-container&#39;).append(&#39;<p><input type="checkbox" name="fruitGroup" class="selector-checkbox"/><p class="selector-option">banana&#39;);
    $(this).nextAll(&#39;.selector-option-container&#39;).removeClass(&#39;hide&#39;);
  });
  $(&#39;.selector&#39;).on(&#39;click&#39;, &#39;.selector-collapse&#39;, function() {
    $(this).nextAll(&#39;.selector-option-container&#39;).addClass(&#39;hide&#39;);
  });
  $(&#39;.selector-t1&#39;).on(&#39;click&#39;, &#39;.selector-option&#39;, function() {
    $(this).parent().parent().children(&#39;.selector-hint&#39;).text($(this).text());
    $(this).parent().addClass(&#39;hide&#39;);
  });
  $(&#39;.selector-t1&#39;).on(&#39;click&#39;, &#39;.selector-checkbox&#39;, function() {
    $(this).parent().parent().parent().children(&#39;.selector-hint&#39;).text($(this).parent().next().text());
    //采用prop方法，对于值为布尔型的属性赋值
    $(this).prop(&#39;checked&#39;, false);
    $(this).parent().parent().addClass(&#39;hide&#39;);
  });
});
</script>


<p>
</p><p>
 </p><p>
  </p><p>select fruit</p>
  <p>+</p>
  <p>-</p>
  <p>
  </p>
 


<p>
</p><p>
 </p><p>
  </p><p>select fruit</p>
  <p>+</p>
  <p>-</p>
  <p>
  </p>
 

あなたはこの記事の方法をマスターしたと思います。さらに興味深くするには、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery はページ マスク レイヤー効果を作成します

jQuery でキーボード イベントを使用する方法

jQuery は Web ページの下部を参照するかどうかを決定します

以上がJquery+HTML+CSSはドロップダウンリスト機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。