Question

我已经做了一些Jquery来通过主下拉菜单来改变多个孩子的drowdown。

我遇到的问题是，只要我添加引导程序样式“form-control select picker”就会中断，因为它会将代码转换为不同的格式。

Jquery通过主下拉列表更改多个子项目的代码如下所示。我还想添加一个保存，以便在选择相关主下拉列表时保存相关的子项：

<select class="search_top_options">
    <option class="saleButton">property sales</option>
    <option class="rentalButton">long lets</option>
</select>

$('.saleButton').click(function () {
      $('.rentalSearch').hide();
      $('.saleButton').removeClass("search_top_tab").addClass("search_top_tab_selected");
      $('.rentalButton').removeClass("search_top_tab_selected").addClass("search_top_tab");
      $('.saleSearch').fadeIn('fast');
  });
  $('.rentalButton').click(function () {
      $('.saleSearch').hide();
      $('.rentalButton').removeClass("search_top_tab").addClass("search_top_tab_selected");
      $('.saleButton').removeClass("search_top_tab_selected").addClass("search_top_tab");
      $('.rentalSearch').fadeIn('fast');
  });

我该怎么做？在截图下面的bootstrap sin格式化的代码（不允许我将它附加到此票证上）：

image here of broken bootstrap select code

Answer 1

您面临的问题是，您正在收听的“点击”事件不适用于选项。

在您的情况下，您可以尝试获取您选择的值。提供的代码对您来说有点变化，但应该给您一些如何解决问题的提示。

$(document).ready(function(){
    $("#showmenu").click(function(){
        $("#menu").toggleClass("show");
    });

    $("#menu a").click(function(){
        if($(this).next('ul').length){
            $(this).next().toggle('fast');
            $(this).children('i:last-child').toggleClass('fa-caret-down fa-caret-left');
        }
    });

    $('#page_content').click(function() {
        $("#menu").removeClass("show");
    });

    $('#menu ul li').click(function() {
        $(this).siblings().children('ul').slideUp();
    });
});

https://jsfiddle.net/tw0g5jeh/

Bootstrap通过主下拉列表Javascript破坏多个孩子

1 个答案: