Question

$('div.view-more').on('click', function(e){
 e.preventDefault();
$(this).find('div.hidden-box').slideToggle('click');






});

我有一个视图更多按钮，当我点击它时滑下一组隐藏的图像。但是，当我尝试单击图像时，它不会在浏览器中打开一个新页面以在全视图中查看它，而是仅在上下切换图像集。任何方式我只能将preventDefault应用于查看更多按钮，同时能够在新标签中打开图像？感谢

Answer 1

<div class="view-more">
        <a href="#">  <span class="glyphicon glyphicon-chevron-down"> 
            <p style="text-align: center; border: none;"> View More</p> </span>
        </a>
      <div class="container hidden-box">
        <div class="row">
          <div class="col-xs-6 col-md-3">
            <a href="http://s25.postimg.org/pbnotgoan/9e314e76731911e2ade722000a1faea4_7.jpg" class="thumbnail" target="_blank">
              <img src="http://s25.postimg.org/pbnotgoan/9e314e76731911e2ade722000a1faea4_7.jpg" data-src="holder.js/100%x180" style="height: 200px; width: 100%; display: block;" alt="...">
            </a>
          </div>

          <div class="col-xs-6 col-md-3">
            <a href="http://s25.postimg.org/rvjbnkbun/1425791_599182570117896_1105202663_n.jpg" class="thumbnail" target="_blank">
              <img src="http://s25.postimg.org/rvjbnkbun/1425791_599182570117896_1105202663_n.jpg" data-src="holder.js/100%x180" style="height: 200px; width: 100%; display: block;" alt="...">
            </a>
          </div>

          <div class="col-xs-6 col-md-3">
            <a href="http://s25.postimg.org/i9pr79kov/10561737_10204539160577633_8045091079031783280_n.jpg" class="thumbnail" target="_blank">
              <img src="http://s25.postimg.org/i9pr79kov/10561737_10204539160577633_8045091079031783280_n.jpg" data-src="holder.js/100%x180" style="height: 200px; width: 100%; display: block;" alt="...">
            </a>
          </div>

          <div class="col-xs-6 col-md-3">
            <a href="http://s25.postimg.org/u1dmi2fb3/1012318_10201552746799155_796052209_n.jpg" class="thumbnail" target="_blank">
              <img src="http://s25.postimg.org/u1dmi2fb3/1012318_10201552746799155_796052209_n.jpg" data-src="holder.js/100%x180" style="height: 200px; width: 100%; display: block;" alt="...">
            </a>
          </div>



        </div> <!-- end of row -->
      </div> <!-- end of hidden box -->
    </div>

Answer 2

刚想通了。显然，view-more div围绕着div.hidde-box。视图 - 更多是作为父级。现在他们是兄弟姐妹。

我也在我的js文件中使用了这段代码。

   $('div.view-more').on('click', function(e){
             e.preventDefault();
           $(this).siblings('div.hidden-box').slideToggle();


            });

如何在调用e.preventdefault后启用click方法？

2 个答案: