3

画像をクリックしてドロップダウンメニューを開閉したいと思います。以下は私が持っているhtmlです。

<a href="javascript:void(0);" class="select_button1"><img alt="" src="images/button.gif" /></a>
<select class="select1">
      <option name="test" value="" class="first">Select</option>
      <option name="test" value="" class="">Opt1</option>
      <option name="test" value="" class="">Opt2</option>
</select>

これは私が試したものですが、うまくいかないようです：

$(document).ready(function() {
  $('select_button1').click(function() {
   $('.select1').toggle();
  });
});
4

2 に答える 2

2

編集：

techfoobarが述べたように、明らかにこれは不可能です。できることは、選択した要素を常に展開し、クリックすると非表示/表示することです。

HTML：

<a href="javascript:void(0);" class="select_button1"><img alt="" src="images/button.gif" /></a>
<br/>
<select class="select1" size="5" style="display:none">        
    <option name="test" value="" class="first">Select</option>       
    <option name="test" value="" class="">Opt1</option>       
    <option name="test" value="" class="">Opt2</option>
</select>

JS：

$('.select_button1').click(function() {
    $('.select1').toggle();
});

http://jsfiddle.net/WYm4H/4/

于 2012-10-28T11:51:54.070 に答える
0

これは、デフォルトの選択ボックスでは不可能です。選択ボックスまたは自己作成のプラグインを使用してみることができます。多くの場合、イベントで開閉できます。

たぶん、これは方法でしょう

$('.select_button1').click(function() {
  var $select = $( '.select1' );
  var options = $select.children().size();
  var size = $select.attr( 'size' );
  $('.select1').attr('size', ( size != options ? options : 1 ) );
});
于 2012-10-28T11:59:59.577 に答える