jquery - Bootstrap 3 Collapse 将我带到页面顶部但也不起作用

标签 jquery html css twitter-bootstrap

我有一个使用 bootstrap 3 创建的页面。我找到了一个关于如何构建论坛的示例代码，我对其进行了一些定制。在底部的论坛顶部(评论)我希望能够点击它，当我点击它时，在它下面，展开信息。现在我只是在那里进行“测试”，但稍后我将添加 html 标签并设置样式。

现在发生的情况是，当我单击主题时，它会将我带到页面顶部，并且“测试”出现在上方而不是下方。

这是我的 jsfiddle

https://jsfiddle.net/mattmega4/kdoxsoo9/ 

      <div class = "navbar navbar-default navbar-static-top">
      <div class="container">
        <a href ="index.html" class="navbar-brand">U.P.M.</a>
        <img src="assets/camera.png" class="pull-left">
        <button class="navbar-toggle" data-toggle = "collapse" data-
target = ".navHeaderCollapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>


        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav navbar-right">

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle = 
"dropdown">Options<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li id=default><a  href="#">Change Theme</a></li>
                </ul>
            </li>
          </ul>
        </div>
    </div>
  </div>



<div class="bigpappa">
  <div class="container well">
    <div class="page-header page-heading">
      <h1 class="pull-left">Forums</h1>
      <ol class="breadcrumb pull-right where-am-i">
        <li><a href="#">Forums</a></li>
        <li class="active">List of topics</li>
      </ol>
      <div class="clearfix"></div>
    </div>
    <p class="lead">Welcome to the United Photographers Movement! Here  
you can post general or specific photography questions as well as 
locations to shoot. Finally, you can also post examples of your work 
for critique. <b>Note</b> Please check older posts before you post your 
own to make sure your question isn't already answered!</p>
    <table class="table forum table-striped">
      <thead>
        <tr>
          <th class="cell-stat"></th>
          <th>
            <h3>Questions</h3>
          </th>
          <th class="cell-stat text-center hidden-xs hidden-
sm">Topics</th>
          <th class="cell-stat text-center hidden-xs hidden-
sm">Posts</th>
          <th class="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-center"><i class="fa fa-question fa-2x text-
primary"></i></td>
          <td>
            <h4><a href="#">Frequently Asked Questions</a><br>
<small>General Questions</small></h4>
          </td>
          <td class="text-center hidden-xs hidden-sm"><a href="#">9 
542</a></td>
          <td class="text-center hidden-xs hidden-sm"><a href="#">89 
897</a></td>
          <td class="hidden-xs hidden-sm">by <a href="#">John Doe</a>
<br><small><i class="fa fa-clock-o"></i> 3 months ago</small></td>
        </tr>

        <tr>
          <td class="text-center"><i class="fa fa-question fa-2x text-
primary"></i></td>
          <td>
            <h4><a href="#">Specific Questions</a><br><small>Questions 
about specific cameras or techniques for specific locations etc...
</small></h4>
          </td>
          <td class="text-center hidden-xs hidden-sm"><a href="#">9 
542</a></td>
          <td class="text-center hidden-xs hidden-sm"><a href="#">89 
897</a></td>
          <td class="hidden-xs hidden-sm">by <a href="#">John Doe</a>
<br><small><i class="fa fa-clock-o"></i> 3 months ago</small></td>
        </tr>
      </tbody>
    </table>
    <table class="table forum table-striped">
      <thead>
        <tr>
          <th class="cell-stat"></th>
          <th>
            <h3>Locations</h3>
          </th>
          <th class="cell-stat text-center hidden-xs hidden-
sm">Topics</th>
          <th class="cell-stat text-center hidden-xs hidden-
sm">Posts</th>
          <th class="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-center"><i class="fa fa-heart fa-2x text-
primary"></i></td>
          <td>
            <h4><a href="#">Alabama</a><br><small>Search locations by 
state</small></h4>
          </td>
          <td class="text-center hidden-xs hidden-sm"><a 
href="#">6532</a></td>
          <td class="text-center hidden-xs hidden-sm"><a 
href="#">152123</a></td>
          <td class="hidden-xs hidden-sm">by <a href="#">Jane Doe</a>
<br><small><i class="fa fa-clock-o"></i> 3 months ago</small></td>
        </tr>
        <tr>
          <td class="text-center"><i class="fa fa-magic fa-2x text-
primary"></i></td>
          <td>
            <h4><a href="#">Alaska</a><br><small>Search locations by 
state</small></h4>
          </td>
          <td class="text-center hidden-xs hidden-sm"><a 
href="#">6532</a></td>
          <td class="text-center hidden-xs hidden-sm"><a 
href="#">152123</a></td>
          <td class="hidden-xs hidden-sm">by <a href="#">Jane Doe</a>
<br><small><i class="fa fa-clock-o"></i> 1 years ago</small></td>
        </tr>
      </tbody>
    </table>

    <table class="table forum table-striped">

      <table class="table forum table-striped">
        <thead>
          <tr>
            <th class="cell-stat"></th>
            <th>
              <h3>Critique</h3>
            </th>
            <th class="cell-stat text-center hidden-xs hidden-
sm">Topics</th>
            <th class="cell-stat text-center hidden-xs hidden-
sm">Posts</th>
            <th class="cell-stat-2x hidden-xs hidden-sm">Last Post</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-center"><i class="fa fa-question fa-2x 
text-primary"></i></td>
            <td>
              <h4 class="theBigCollapse" data-toggle="collapse" data-
target=".collapse"><a href="#">Get your work critiqued</a><br>
<small>Please link your photographs <b>DO NOT</b> try to upload!
</small></h4>
            </td>
            <td class="text-center hidden-xs hidden-sm"><a href="#">9 
542</a></td>
            <td class="text-center hidden-xs hidden-sm"><a href="#">89 
897</a></td>
            <td class="hidden-xs hidden-sm">by <a href="#">John Doe</a>
<br><small><i class="fa fa-clock-o"></i> 3 months ago</small></td>
          </tr>
        </tbody>


        <div class="collapse">

          Testing
        </div>


      </table>




    </table>
  </div>
  </div>







  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">
        Site built by Self Aware Machines
      </p>

  <p>
    <div class="input-group col-lg-3 pull-right">
      <input type="text" class="form-control" placeholder="Search  
Site"/>
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Search</button>
      </span>

    </div>
  </p>


$(document).ready(function(){
$(".theBigCollapse").click(function(){
    $(".collapse").collapse('toggle');
});


.bigpappa{
  padding: 55px;
}

.forum.table > tbody > tr > td {
    vertical-align: middle;
}

.forum .fa {
    width: 1em;
    text-align: center;
}

.forum.table th.cell-stat {
    width: 6em;
}

.forum.table th.cell-stat-2x {
    width: 14em;
}

最佳答案

您正在使用 # onclick 上的选择器以 ID 为 theBigCollapse 的元素为目标的事件.问题出在您的 html 上，您使用的元素是 class而不是 id .

所以不要做 $("#theBigCollapse")用这个代替 $(".theBigCollapse")

另外，将您带到顶部的原因还在于该元素内的 anchor 。 <a href="#">Get your work critiqued</a>

要修复它，您需要阻止单击时的默认操作。所以要做到这一点，你还需要添加:

$(".theBigCollapse a").click(function(e){
    e.preventDefault();
});

你的最终 JS 应该是这样的:

$(document).ready(function(){
    $(".theBigCollapse").click(function() {
        $(".collapse").collapse('toggle');
    });

    $(".theBigCollapse a").click(function(e){
        e.preventDefault();
    });
});

Fiddle

更新

关于“测试”出现在上方而不是下方的问题是因为您放置了 div直接在table里面这是无效的。

例如

<table class="table forum table-striped">
  <tr>
    <td>....</td>
  </tr>...
  <div class="collapse">
    Testing
  </div> 
</table>

要解决这个问题，您可以将 div 放在 <td></td> 中甚至在 <table></table> 之外.

例如

<table class="table forum table-striped">
  <tr>
    <td>....</td>
  </tr>...
</table>

<div class="collapse">
  Testing
</div>

Fiddle

P.S 你有一张 table 里面的一张 table ，我认为这是没有必要的。我已将它固定在我的 fiddle 上。

你有这个:

<table>
 <table>
   <tr><td>...</td></tr>
 </table>
</table>

关于jquery - Bootstrap 3 Collapse 将我带到页面顶部但也不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31575551/

上一篇：javascript - 如何使用 Protractor 测试是否加载了正确的图像？

下一篇：javascript - Knockout Js 计算出在模型中不起作用

相关文章：

google-chrome - 如何防止 flex 元素因其文本而溢出？

Javascript 在页面刷新时不起作用

javascript - 重新排序某些元素后如何重置 ng-repeat block ？

html - 如何使悬停时菜单保持可见

html - 强制相对 DIV 承认他的绝对 DIV child

css - 辐射梯度中的 strip 太明显

jquery - Fullcalendar Rails 可拖动/调整大小不起作用

jquery - 随着 jQuery DOM 操作(添加/删除/等)的内容更改，页面页脚在 View 中上下跳动

javascript - div 的关闭按钮，使用 Jquery 访问 ID

javascript - 错误所有浏览器，但 Firefox 尝试使用 d3.js 更改背景图像

©2024 IT工具网  联系我们