Bootstrap 3 Свернуть меня, вернув меня в начало страницы и не работая ни

Question

У меня есть страница, созданная с помощью загрузочного буфера 3. Я нашел пример кода, как построить форум, и я немного его настроил. На нижнем форуме toping (критика) я хочу, чтобы иметь возможность щелкнуть по нему, и когда я сделаю это, под ним, разоблачить информацию. На данный момент у меня просто есть «тестирование», но позже я добавлю 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; 
} 

Answer 1

Вы используете # селектор на вашем onclick случае какой целевой элемент с идентификатором theBigCollapse. Проблема заключается в вашем html, этот элемент, который вы используете, является class, а не id.

Так вместо того, чтобы делать $("#theBigCollapse") использовать это вместо $(".theBigCollapse")

Также причина, почему она приносит вас к вершине из-за якоря внутри этого элемента. <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

Update

Что касается вопроса наличия «тестирование» отображается выше, а не ниже, потому что вы разместили свой 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> 
    <tr><td>...</td></tr> 
</table> 
</table> 

Answer 2

Во-первых изменить содержимое файла JS:

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

Это сделает ваш текст появится в ниже части (выше критического анализа заголовка)

И чтобы ваша страница не поднималась вверх каждый раз, когда вы нажимаете на заголовок критики, удалите элемент данных target = ". Collapse" из

<h4 class="theBigCollapse" data-toggle="collapse" data-target=".collapse"> 

Нет необходимости использовать data-target = ". Collapse", когда вы запускаете коллапс с использованием функций JavaScript для начальной загрузки.