Question

我有一个Bootstrap的模态窗口，我有一个默认隐藏的div。我想点击链接（也在这个模态内）并显示它。问题是我无法点击链接，因此我的div仍然是hedden。

也许某人有同样的问题或者可以给我很好的建议如何解决这个问题？

抱歉，在我询问之前我没有发布代码

<div class="modal fade js-custom-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">

                <div class="f-item f-item-modal">
                    <!--./f-item__details-->
                    <div class="f-item__info">
                        <div class="f-item__head modal-view">content</div>
                        <div class="f-item__short _border">content</div>
                        <div class="f-item__requirements">content</div>
                        <div class="f-item__body">
                            <div class="f-item__dest">
                                <a href="#" class="display-route"><i><img src="....png" alt="route"></i>THIS MUST DISPLAY div.f-item__map</a>
                            </div>
                        </div>
                        <div class="f-item__map">
                            <iframe src="..." frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div>
                        <div class="f-item__footer modal-view"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是我的jQuery代码

$('a.display-route').click(function(e){
e.preventDefault;
$('.f-item__map').toggleClass('js-route');

}）;

在CSS

.js-route { display: block;}

Answer 1

我试过了。请看看。

＆＃13;

$(document).ready(function(){
		$("a.insidemodal").click(function(){
    			$("div.abc").css("display","block");
    })
})

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <a class="insidemodal">Some text in the modal.</a>
          
          <div class="abc" style="display:none">I am hidden unless clicked by an anchor</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

＆＃13;

Answer 2

你必须向我们提供更多细节。但是，这里的经典问题可能是您链接的委托事件问题。

问你这个问题：你添加on("click" ...时的链接是否存在？

Answer 3

$('#link').click(function() {
    $('#div').css('display','block');
});

这只是一个例子。如果你可以在这里发布代码，那就更好了。

如何在Bootstrap模式中单击显示div？

3 个答案: