Question

我已经可以隐藏/显示或切换此类元素

<h4 id="h4">Hide this when needed</h4>
<button id="showInput" >Show Input</button>
<button id="hideTheH4">Hide Text</button>
<div id="input" style="display:none;">
 <input type="text" placeholder="Enter Name">
</div>

脚本是

$(document).ready(function(){
   $('#showInput').click(function(){
    $('#input').toggle();
  })
});
$(document).ready(function(){
   $('#hideTheH4').click(function(){
    $('#h4').toggle();
  })
});

我看到了这个http://jsfiddle.net/7ekRN/，我尝试创建一个带有弹出框和按钮的按钮，可以使用脚本
这是代码
HTML

<h4 id="h4">Hide this when needed</h4>
<button data-toggle="popover" data-trigger="focus" id="option">Option</button>

<div id="popOptions" style="display:none;">  
            <a href='#' id="showInput">Show Input</a><br>
            <a href='#' id="hideH4">Hide Text</a>
</div>
<div id="input" style="display:none;">
 <input type="text" placeholder="Enter Name">
</div>

脚本

$(document).ready(function(){
   $('#option').popover({title: "Select", content: $("#popOptions").html(), html: true, placement: "right"}).click(function(){
     $(this).popover('show');
   });
});
$(document).ready(function(){
   $('#showInput').click(function(){
    $('#input').toggle();
  })
});
$(document).ready(function(){
   $('#hideH4').click(function(){
    $('#h4').toggle();
  })
});

但是当我点击Popover的内容时，它不会切换H4和输入
他们有不同吗？因为我不知道哪里或哪里出错

Answer 1

您的代码没有任何问题。唯一的问题是您必须将popover.js库文件包含在您的脚本中，如此

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

这是一个包含您给定代码的jsFiddle。我刚刚加入了popover.js库

如何在Popover中使用“显示”，“隐藏”和“切换”

1 个答案: