Javascript jQuery多点击实例

我制作了一个自定义的选择框，当点击按钮时打开，效果很好。但是，当单击一个按钮时，如果同一页面上有多个选择框，则所有选择框都将打开。有没有一种方法可以做到这一点，而不必为每个选择框应用单独的类和多个函数

这是我的HTML

<div class="select-box-wrap">
    <select class="select-box" name="mbpanel_layout_section_options[site_layout]">
        <option value="1" <?php if(1 == $options['site_layout']) echo 'selected'; ?>>Left Sidebar</option>
        <option value="2" <?php if(2 == $options['site_layout']) echo 'selected'; ?>>Right Sidebar</option>
        <option value="3" <?php if(3 == $options['site_layout']) echo 'selected'; ?>>Three Column</option>
        <option value="4" <?php if(4 == $options['site_layout']) echo 'selected'; ?>>Full Width</option>
    </select>
    <input type="button" class="select-click"/>
</div>

<div class="select-box-wrap">
    <select class="select-box" name="mbpanel_layout_section_options[post_layout]">
        <option value="1" <?php if(1 == $options['post_layout']) echo 'selected'; ?>>Left Thumbnail</option>
        <option value="2" <?php if(2 == $options['post_layout']) echo 'selected'; ?>>Right Thumbnail</option>
        <option value="3" <?php if(3 == $options['post_layout']) echo 'selected'; ?>>Top Thumbnail</option>
    </select>
    <input type="button" class="select-click"/>
</div>

---

这里有一个

您需要使用DOM遍历来查找

。选择与单击按钮相关的框

，而不是使用影响元素所有实例的类选择器。试试这个：

(function($) {
    $(".select-click").click(function() {
        var $selectBox = $(this).prev('.select-box');
        var size = $selectBox.find('option').size();
        var sizeDifference = size != $selectBox.prop('size');
        $selectBox.prop('size', sizeDifference ? size : 1).toggleClass("select-open", sizeDifference);
    })
})(jQuery);

---

请注意，我还使用了三元表达式略微更改了逻辑，使代码更短。

DOM遍历将代码与html布局配对-如果这是一个问题（在大多数情况下不是），那么您可以“配对”您的

。选择单击
和
。使用数据属性选择框
，并以这种方式找到它们。如果这不是一个问题，这是一个很好的答案。谢谢。这正是我所需要的。如果可能的话，也许你可以进一步帮助我。如果单击某个选项，是否有办法关闭该框？如果像普通选择框一样单击页面上的其他任何位置，是否有办法关闭该框？您只需要在
选择框包装
元素之外听到一声单击，谢谢您完成了单击页面上任何位置的技巧，但是如果单击其中一个选项呢？太完美了！谢谢你的帮助。
(function($) {
    $(".select-click").click(function() {
        var $selectBox = $(this).prev('.select-box');
        var size = $selectBox.find('option').size();
        var sizeDifference = size != $selectBox.prop('size');
        $selectBox.prop('size', sizeDifference ? size : 1).toggleClass("select-open", sizeDifference);
    })
})(jQuery);