从事件处理程序调用时,Bootstrap Dropdown切换不起作用

时间:2013-05-22 22:12:33

标签: jquery twitter-bootstrap drop-down-menu

我有一个元素,下拉列表和一些jquery来动态切换下拉列表。但是,从事件处理程序调用时,切换不起作用。我已经尝试了相关Stackoverflow答案所建议的所有内容,但没有任何作用:(

JavaScript的:

$(function(){
  //$(".dropdown-toggle").dropdown('toggle'); // this works
  $('#click').click(function(){
    $(".dropdown-toggle").dropdown('toggle'); // this doesn't
  });
});

HTML:

<div class="dropdown clearfix">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
   <ul id="dropdown" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
      <li><a tabindex="-1" href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
  </div>
<br>
<div id="click">Click to toggle</div>

这是工作(不是!)样本:http://bootply.com/61988

2 个答案:

答案 0 :(得分:19)

只是阻止事件传播,它应该工作。

$(function(){
  //$(".dropdown-toggle").dropdown('toggle'); // this works
  $('#click').click(function(e){
      e.stopPropagation();
    $(".dropdown-toggle").dropdown('toggle');// this doesn't
  });
});

Fiddle

Bootply

答案 1 :(得分:0)

对于这里的 vue 用户,。你可以用这个。

<input type="text" id="SematYaShoghlBime">
<img id="loading" style="display:none;width:30px;height:30px" src="https://bodhitreeyogaresort.com/wp-content/uploads/2019/02/loading_icon_sm.gif" />
@section Scripts{
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(function () {
            $("#SematYaShoghlBime").autocomplete({
                source: function (request, response) {
                    $("#loading").show();
                    $.getJSON("/Home/SearchInTaminJobs", {
                        term: $("#SematYaShoghlBime").val().trim()

                    }, function (data) {
                        response($.map(data, function (el, index) {
                            return el;
                        }));
                        $("#loading").hide();
                    })
                },              
            });
        });
    </script>
}

脚本

private fun startSpeechToText() {
    val speechRecognizer = SpeechRecognizer.createSpeechRecognizer(this)
    val speechRecognizerIntent = Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH)
    speechRecognizerIntent.putExtra(
        RecognizerIntent.EXTRA_LANGUAGE_MODEL,
        RecognizerIntent.LANGUAGE_MODEL_FREE_FORM
    )
    speechRecognizerIntent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault())

    speechRecognizer.setRecognitionListener(object : RecognitionListener {
        override fun onReadyForSpeech(bundle: Bundle?) {}
        override fun onBeginningOfSpeech() {}
        override fun onRmsChanged(v: Float) {}
        override fun onBufferReceived(bytes: ByteArray?) {}
        override fun onEndOfSpeech() {}
        override fun onError(i: Int) {}

        override fun onResults(bundle: Bundle) {
            val result = bundle.getStringArrayList(SpeechRecognizer.RESULTS_RECOGNITION)
            if (result != null) {
                // result[0] will give the output of speech
            }
        }           
        override fun onPartialResults(bundle: Bundle) {}
        override fun onEvent(i: Int, bundle: Bundle?) {}
    })  
    // starts listening ...
    speechRecognizer.startListening(speechRecognizerIntent)