セレクトボックスを自作するにあたり、jQueryを使っています。
後述するように色々調べて3パターン作ってみたのですが、どれも「開くと閉じる」という状態です!!
その箇所は、下記コードの
/* * ラベルクリックで選択肢を開く * どのパターンでもできない! */
という部分です。
3パターンどれも「開くと閉じる」になってしまいます。
サンプルを作りました。操作して頂くと早いと思います。
https://jsfiddle.net/tf0vu1pd/
コードはこちらです。
<style> /* 選択中のものを表示 */ label { background: #efefef; width: 100px; padding: 5px 10px; display: block; cursor: pointer; } input { display: none; } /* 選択肢を表示 */ ul { list-style: none; margin: 0; padding: 0; display: none; } li { background: #efefef; border-bottom: 1px solid #ddd; padding: 5px 10px; margin: 0; width: 100px; cursor: pointer; } li:hover { background: #aaa; color: #fff; } </style>html
1<div> 2 <label class="open"> 3 <input type="radio" id="submit" checked="" value="a"> 4 <span id="now">りんご</span> 5 </label> 6 <ul> 7 <li data-submit="0"><span>りんご</span></li> 8 <li data-submit="1"><span>ごりら</span></li> 9 <li data-submit="2"><span>らっぱ</span></li> 10 </ul> 11</div>
<script> /* * ラベルクリックで選択肢を開く * どのパターンでもできない! */ //パターン1 $(document).on("click","label", function(){ if( $(this).hasClass('open') ){ $(this).closest('div').find('ul').slideDown(); $(this).removeClass('open'); }else{ $(this).closest('div').find('ul').slideUp(); $(this).addClass('opan'); } }); //パターン2 $(document).on("click","label.open", function(){ $(this).closest('div').find('ul').slideDown(); $(this).removeClass('open').addClass('close'); }); $(document).on("click","label.close", function(){ $(this).closest('div').find('ul').slideUp(); $(this).removeClass('close').addClass('opan'); }); //パターン3 $(document).on("click","label", function(){ if( $(this).closest('div').find('ul').css('display') == 'block' ){ $(this).closest('div').find('ul').slideUp(); }else{ $(this).closest('div').find('ul').slideDown(); } }); /* * 選択するとinputを変更 * 問題なくできた */ $(document).on("click","li", function(){ var selected_txt = $(this).text(); $('#now').text(selected_txt); var selected_data = $(this).attr('data-submit'); $('#submit').val(selected_data); $(this).closest('div').find('ul').slideUp(); }); </script>
かなり頑張ったのですが、どのパターンでも玉砕しまして、どうしても「開くと閉じる」のジレンマが解決できません。
閉じるのは選択してからでいいのですが…、
このようなジレンマはどうすれば解決できるものでしょうか?
具体的なコードで教えて頂けますと大変助かります。
どうか助けてください!宜しくお願いします!
(質問文は編集できます)質問文のコードはそれぞれ(HTML/JavaScript/CSS)コードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
回答1件
あなたの回答
tips
プレビュー