Question

我有一个自定义选择框，但我有一个错误。

现在的错误是，如何在外面点击时关闭自定义选项。

在外部点击时，默认选择选项会隐藏选择选项，然后再次单击选择框时会再次显示选择选项。

我希望我的自定义选项显示相同的内容。

<style type='text/css'>
        div.selectBox
        {
            position:relative;
            display:inline-block;
            cursor:default;
            text-align:left;
            line-height:30px;
            clear:both;
            color:#888;
        }
        span.selected
        {
            width:167px;
            text-indent:20px;
            border:1px solid #ccc;
            border-right:none;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
            background:#f6f6f6;
            overflow:hidden;
        }
        span.selectArrow
        {
            width:30px;
            border:1px solid #60abf8;
            border-top-right-radius:5px;
            border-bottom-right-radius:5px;
            text-align:center;
            font-size:20px;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            user-select: none;
            background:#4096ee;
        }

        span.selectArrow,span.selected
        {
            position:relative;
            float:left;
            height:30px;
            z-index:1;
        }

        div.selectOptions
        {
            position:absolute;
            top:28px;
            left:0;
            width:198px;
            border:1px solid #ccc;
            border-bottom-right-radius:5px;
            border-bottom-left-radius:5px;
            overflow:hidden;
            background:#f6f6f6;
            padding-top:2px;
            display:none;
        }

        span.selectOption
        {
            display:block;
            width:80%;
            line-height:20px;
            padding:5px 10%;
        }

        span.selectOption:hover
        {
            color:#f6f6f6;
            background:#4096ee; 
        }           
 </style>

  <div class='selectBox'>
        <span class='selected'></span>
        <span class='selectArrow'>&#9660</span>
        <div class="selectOptions" >
            <span class="selectOption" value="Option 1">Rob</span>
            <span class="selectOption" value="Option 2">Charles</span>
            <span class="selectOption" value="Option 3">Smith</span>
        </div>
    </div>


 <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

 <script type='text/javascript'><!--
        $(document).ready(function() {
            enableSelectBoxes();
        });

        function enableSelectBoxes(){
            $('div.selectBox').each(function(){
                $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
                $(this).attr('value',$(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

                $(this).children('span.selected,span.selectArrow').click(function(){
                    if($(this).parent().children('div.selectOptions').css('display') == 'none'){
                        $(this).parent().children('div.selectOptions').css('display','block');
                    }
                    else
                    {
                        $(this).parent().children('div.selectOptions').css('display','none');
                    }
                });

                $(this).find('span.selectOption').click(function(){
                    $(this).parent().css('display','none');
                    $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
                    $(this).parent().siblings('span.selected').html($(this).html());
                });
            });             
        }//-->
    </script>

Answer 1

<强> Working Fiddle

使用以下

//My code

$(document).mouseup(function (e)
{
    var container = $(".selectBox");

    if (!container.is(e.target)
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $(".selectOptions").hide();
    }
});

有关详情，请参阅here

Answer 2

选择框打开时使用叠加层。单击叠加时，关闭选择框。以下是所做的更改。

CSS：

.selectBox {
    z-index: 101;
    /* should be 1 greater than overlay's z-index */
}
.overlay {
    z-index: 100;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0.5;
    background-color: black;
    display: none;
}

Javascript：

$('.overlay').bind('click', function() {
    $('.selectBox .selectOptions').slideUp();
    $(this).hide();
});

打开selectBox时，显示叠加，并在关闭selectBox时隐藏叠加层。

为了了解其工作原理，显示了叠加层的不透明度。您可以将不透明度设置为零。

<强>演示

＆＃13;

$(document).ready(enableSelectBoxes);

function enableSelectBoxes() {
    $('div.selectBox').each(function() {
      $(this).children('span.selected').html($(this).children('div.selectOptions').children('span.selectOption:first').html());
      $(this).attr('value', $(this).children('div.selectOptions').children('span.selectOption:first').attr('value'));

      $(this).children('span.selected,span.selectArrow').click(function() {
        if ($(this).parent().children('div.selectOptions').css('display') == 'none') {
          $(this).parent().children('div.selectOptions').css('display', 'block');
          $('.overlay').show();
        } else {
          $(this).parent().children('div.selectOptions').css('display', 'none');
        }
      });

      $(this).find('span.selectOption').click(function() {
        $('.selectBox .selectOptions').slideUp();
        $('.overlay').hide();
        $(this).parent().css('display', 'none');
        $(this).closest('div.selectBox').attr('value', $(this).attr('value'));
        $(this).parent().siblings('span.selected').html($(this).html());
      });
    });
  } //-->

$('.overlay').bind('click', function() {
  $('.selectBox .selectOptions').slideUp();
  $(this).hide();
});

＆＃13;

div.selectBox {
  position: relative;
  display: inline-block;
  cursor: default;
  text-align: left;
  line-height: 30px;
  clear: both;
  color: #888;
  z-index: 101;
}
span.selected {
  width: 167px;
  text-indent: 20px;
  border: 1px solid #ccc;
  border-right: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background: #f6f6f6;
  overflow: hidden;
}
span.selectArrow {
  width: 30px;
  border: 1px solid #60abf8;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: center;
  font-size: 20px;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
  background: #4096ee;
}
span.selectArrow,
span.selected {
  position: relative;
  float: left;
  height: 30px;
  z-index: 1;
}
div.selectOptions {
  position: absolute;
  top: 28px;
  left: 0;
  width: 198px;
  border: 1px solid #ccc;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  background: #f6f6f6;
  padding-top: 2px;
  display: none;
}
span.selectOption {
  display: block;
  width: 80%;
  line-height: 20px;
  padding: 5px 10%;
}
span.selectOption:hover {
  color: #f6f6f6;
  background: #4096ee;
}
.overlay {
  z-index: 100;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0.5;
  background-color: black;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class='selectBox'> <span class='selected'></span>
  <span class='selectArrow'>&#9660</span>

  <div class="selectOptions"> <span class="selectOption" value="Option 1">Rob</span>
    <span class="selectOption" value="Option 2">Charles</span>
    <span class="selectOption" value="Option 3">Smith</span>

  </div>
</div>
<div class="overlay"></div>

＆＃13;

请参阅fiddle

Answer 3

如果您可以在单击对象时为对象添加焦点，那么您可以拥有一个事件侦听器，该事件侦听器在失去焦点时进行侦听（即：当您在框外单击时），并且在该事件处理程序中，只需关闭它。 / p>

如何关闭自定义选择选项框

3 个答案: