selectbox風のリスト作り、jqueryのmouseoverとmouseoutで表示切り替えをしたいのですが、うまくいきません...

Question

下記のようなコードでselectbox風のリストを作りました。
mouseoverした際はリストが表示されますが、
リスト上にマウスが乗った際に消えてしまいます。

mouseoutのクラス指定が良くないとは思うのですが、
どのクラスを指定すればリスト上にマウスが乗ってもリストが消えないようにできるのでしょうか？

<form>
    <div class="selectbox">
      <p class="selectbox__select">
        <span class="selectbox__select__text">選択してください</span>
      </p>
      <ul class="selectbox__pulldown">
        <li class="selectbox__pulldown__list" param="項目">項目1</li>
        <li class="selectbox__pulldown__list" param="項目2">項目2</li>
        <li class="selectbox__pulldown__list" param="項目3">項目3</li>
        <li class="selectbox__pulldown__list" param="項目4">項目4</li>
        <li class="selectbox__pulldown__list" param="項目5">項目5</li>        
      </ul>
      <input type="hidden" name="selectbox" value="" />
    </div>

    <input type="submit" value="検索">

  </form>

$('.selectbox').each(function(){
    var self = $(this);
    var select = $('.selectbox__select',self);
    var pulldown = $('.selectbox__pulldown',self);
    var data = $('input:hidden',self);
    var select_value = $('.selectbox__select__text',select);

    pulldown.hide().children(':last-child').addClass('last-child');


    select.mouseover(function(e){
      pulldown.show();
      $(this).addClass('select_focus');

      e.stopPropagation();
      return false;
    });


    $('.selectbox__pulldown__list',pulldown).click(function(){
        var text = $(this).text();
        select_value.text(text);
        data.val($(this).attr('param'));

        $('.selected',pulldown).removeClass('selected');
        $('.select_focus').removeClass('select_focus');
        $(this).addClass('selected');

        return false;
    });


    // selectとpulldownからmouseoutしたときに非表示にしたい
    select.mouseout(function(){
        $('.select_focus').removeClass('select_focus');
        $('.selectbox__pulldown').hide();
    });
});

Answer 1

どういう挙動をしたいかによりますが
たとえばこんな感じでどうですか？

$(function(){
  $('.selectbox').find('.selectbox__pulldown').hide();
  $('.selectbox').on('mouseover mouseout',function(e){
    $(this).find('.selectbox__pulldown').toggle(e.type=='mouseover');
  });
});

Comments

[退会済みユーザー]

ありがとうございます。
解決しました。
やりたい挙動でした！

Answer 2

こうとか？

// select.mouseover(/* 略 */);
//   ↓
   self.mouseover(/* 略 */);

// select.mouseout(/* 略 */);
//   ↓
   self.mouseout(/* 略 */);

Comments

[退会済みユーザー]

ありがとうございました。
解決しました。