logo标签列表

用单选按钮激活的Bootstrap data-toggle下拉菜单

javascriptjquerytwitter-bootstrap
3
我试图通过单击单选按钮来打开一个bootstrap下拉列表，但是这听起来很简单，却让我头痛不已。
根据Bootstrap的说明，您可以使用带有data-toggle =“dropdown”的超链接或按钮来打开下拉列表。您还可以使用 $（'.dropdown-toggle'）.dropdown（），但触发器仍必须具有data-toggle =“dropdown”才能正常工作。
问题在于，单选按钮不允许data-toggle =“dropdown”，如果我将单选选项包装在自己的超链接标记中并添加切换到其中，则下拉列表可以工作，但单选按钮本身不起作用，而我需要同时使用两者。单选按钮将执行操作，同时显示下拉列表以允许进行二次操作。
我简化了代码，以便更简单地说明我的问题并复制它。您可以在CODEPEN中看到下拉列表可用，但单选按钮没有显示“Hello Offender”。如果您删除<a>...</a>，则会看到单选按钮工作，但下拉列表不工作。如何使两者都正常工作？
以下是我的代码：
        <div class="form-group widget-header-radio-group">
            <div class="radio-group inline-radio">
                <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked>
                <label for="individualForm" class="radio-custom-label">Individual</label>
            </div>
            <div class="radio-group inline-radio">
                <input id="businessForm" class="radio-custom" name="radio-group" type="radio">
                <label for="businessForm" class="radio-custom-label">Business</label>
            </div>
            <div class="radio-group inline-radio">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                    <input id="offenderForm" class="radio-custom" name="radio-group" type="radio">
                    <label for="offenderForm" class="radio-custom-label">Offender</label>
                    <ul class="dropdown-menu" id="dropdownMenu">
                        <li id="stateOff"><a href="#">State</a></li>
                        <li id="federalOff"><a href="#">Federal</a></li>
                        <li id="countyOff"><a href="#">County</a></li>
                    </ul>
                </a>
            </div>
        </div>

        <div id="indDemo" class=""> Hello Individual</div>  
        <div id="busDemo" class=""> Hello Business</div>    
        <div id="offDemo" class=""> Hello Offender</div>    

$(document).ready(function () {

    $('#busDemo').hide();
    $('#offDemo').hide();

    $('#individualForm').change(function () {
        if (this.checked) {
            $('#indDemo').show();
            $('#busDemo').hide();
            $('#offDemo').hide();
        }
    });

    $('#businessForm').change(function () {
        if (this.checked) {
            $('#busDemo').show();
            $('#indDemo').hide();
            $('#offDemo').hide();
        }
    });


    $('#offenderForm').change(function () {
        if (this.checked) {
            $('#offDemo').show();
            $('#indDemo').hide();
            $('#busDemo').hide();
        }
    });


});

请查看CODEPEN这里

谢谢！

可能的解决方案是给单选框添加一个更改或点击处理程序，以调用$('.dropdown-toggle').dropdown()函数。 - happymacarts
1
尝试过了，但是失败了。在单选输入类型中不允许使用data-toggle下拉菜单的依赖项。 - LOTUSMS
如果你把收音机包裹在一个<div>标签中，并将"data-toggle"属性添加到该容器，会怎么样？ - happymacarts
data-toggle 可与超链接和/或按钮一起使用 - 根据 Bootstrap 文档。 - LOTUSMS
3个回答
3

将单选按钮从锚点内取出，因为锚点包含了单选按钮，所以单选按钮的变化事件没有被触发。将单选按钮的变化处理程序修改为以下内容：

$('#offenderForm').change(function () {
        if (this.checked) {
            $('#offDemo').show();
            $('#indDemo').hide();
            $('#busDemo').hide();
            $(this).siblings('a.dropdown-toggle').click();
        }
    });

http://codepen.io/anon/pen/dXAQXX

编辑：在您的JavaScript代码中添加以下内容：

$('a.dropdown-toggle').click(function(){
       $(this).siblings('input').click();
   });

这样，当您点击锚点时，会触发单选按钮的点击事件。同样地，当您点击单选按钮时，会触发锚点的点击事件。

您的答案似乎解决了我需要处理的一些CSS工作，但是我遇到了与@gaetanoM相同的问题。无论我点击单选按钮还是单选标签，它都不会弹出。您的方案是在带有超链接的单选标签上弹出。然而单选按钮仍然没有起作用。非常感谢您的回答，但并不完全是我所需要的答案。+1 - LOTUSMS
2

如果输入字段在锚点内部，那么输入字段将永远不会接收到更改事件。但是，您可以将事件委托给父div，并测试您单击的锚点是否包含您要查找的输入元素：

$(document).ready(function () {
  $('#busDemo').hide();
  $('#offDemo').hide();

  $('#individualForm').change(function () {
    if (this.checked) {
      $('#indDemo').show();
      $('#busDemo').hide();
      $('#offDemo').hide();
    }
  });

  $('#businessForm').change(function () {
    if (this.checked) {
      $('#busDemo').show();
      $('#indDemo').hide();
      $('#offDemo').hide();
    }
  });


  
  // delegate the event differently
  $('div.radio-group.inline-radio').on('click', 'a', function (e) {
    var offenderForm = document.getElementById('offenderForm');
    if (this.contains(offenderForm)) {
      offenderForm.checked = !offenderForm.checked;
      if (offenderForm.checked) {
        $('#offDemo').show();
        $('#indDemo').hide();
        $('#busDemo').hide();
      }
    }
  });
});
.dropdown-menu{
  left: 200px;
  top: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<!-- unchanged HTML  -->
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-group widget-header-radio-group">
                <div class="radio-group inline-radio">
                    <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked>
                    <label for="individualForm" class="radio-custom-label">Individual</label>
                </div>
                <div class="radio-group inline-radio">
                    <input id="businessForm" class="radio-custom" name="radio-group" type="radio">
                    <label for="businessForm" class="radio-custom-label">Business</label>
                </div>
                <div class="radio-group inline-radio">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                        <input id="offenderForm" class="radio-custom" name="radio-group" type="radio">
                        <label for="offenderForm" class="radio-custom-label">Offender</label>
                        <ul class="dropdown-menu" id="dropdownMenu">
                            <li id="stateOff"><a href="#">State</a></li>
                            <li id="federalOff"><a href="#">Federal</a></li>
                            <li id="countyOff"><a href="#">County</a></li>
                        </ul>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div calss="row">
        <div class="col-xs-12">
            <div id="indDemo" class=""> Hello Individual</div>
            <div id="busDemo" class=""> Hello Business</div>
            <div id="offDemo" class=""> Hello Offender</div>
        </div>
    </div>
</div>

我看到的唯一问题是，我必须实际点击作为超链接的单词才能起作用，但是点击实际的单选按钮不起作用:( 如果两者都能起作用，用户体验会更好/无论如何+1。这是一个很好的解决方案，只是离答案还差一点。 - LOTUSMS
1

try this one

function hideAllbut(id) {
    $('#indDemo').hide();
    $('#busDemo').hide();
    $('#offDemo').hide();
    $('.dropdown-menu').hide()
    if (id) $('#' + id).show();
}
$('#individualForm').change(function() {
    hideAllbut('indDemo');
});

$('#businessForm').change(function() {
    hideAllbut('busDemo');
});

$('#offenderForm').click(function() {
    hideAllbut('offDemo');
    $('.dropdown-menu').dropdown().show();
});
$('.dropdown-menu a').click(function() {
    $('#offDemoSub').html(this.innerHTML);
    $('.dropdown-menu').dropdown().hide();
});
hideAllbut('indDemo');
.dropdown-menu {
    left: 150px !important;
    top: 60px !important;
}
#offDemoSub { padding-left: 20px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-group widget-header-radio-group">
                <div class="radio-group inline-radio">
                    <input id="individualForm" class="radio-custom " name="radio-group" type="radio" checked>
                    <label for="individualForm" class="radio-custom-label">Individual</label>
                </div>
                <div class="radio-group inline-radio">
                    <input id="businessForm" class="radio-custom" name="radio-group" type="radio">
                    <label for="businessForm" class="radio-custom-label">Business</label>
                </div>
                <div class="radio-group inline-radio">

                    <input id="offenderForm" class="radio-custom" name="radio-group" type="radio">
                    <label for="offenderForm" class="radio-custom-label">Offender</label>
                    <ul class="dropdown-menu" id="dropdownMenu">
                        <li id="stateOff"><a href="#">State</a></li>
                        <li id="federalOff"><a href="#">Federal</a></li>
                        <li id="countyOff"><a href="#">County</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div calss="row">
        <div class="col-xs-12">
            <div id="indDemo" class=""> Hello Individual</div>
            <div id="busDemo" class=""> Hello Business</div>
            <div id="offDemo" class=""> Hello Offender
                <div id="offDemoSub" class=""></div>
            </div>
        </div>
    </div>
</div>

1
这是我的借口，如果我不能让它工作。我最初不想选择它的问题是因为你一旦打开它就无法关闭，因为它只能通过单选按钮触发打开和关闭。在mouseleave时关闭可能是一个好的解决办法，但我觉得要为我的解决办法再找一个解决办法更加麻烦。无论如何，谢谢JAG。 - LOTUSMS
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接