Как сделать столбцы/аккордеон открытым (или свернуть), когда мышь перемещается (или выходит) на панель?

Я попытался объединить решения от экспертов, но я все еще не могу открыть свои столбцы, когда наводил курсор мыши на панель.Как сделать столбцы/аккордеон открытым (или свернуть), когда мышь перемещается (или выходит) на панель?

То, что я хотел бы достичь, это:

Когда мышь перемещается в любую область панели (она не должна быть более фактической якорный текст), корпус панель автоматически открывается (и впоследствии все остальные панели закрываются, что уже делает код).
Когда мышь покидает панель, корпус панели автоматически сжимается.

Просмотрите мой код и дайте мне знать, что я делаю неправильно. Спасибо вам большое за ваше время!

<div class="container"> 
    <div class="row"> 
     <div class="panel-group" id="Heyaccordion"> 
     <div class="panel panel-default col-lg-2"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
       <a href="#collapseTopOneMore" data-toggle="collapse" data-parent="#Heyaccordion">Box 1</a> </h4> 
      </div> 
      <div class="panel-collapse collapse" id="collapseTopOneMore"> 
       <div class="panel-body"> 
       <a href="#">Boxy 1 body</a> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default col-lg-2"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
       <a href="#collapseTopTwoMore" data-toggle="collapse" data-parent="#Heyaccordion">Box 2</a></h4> 
      </div> 
      <div class="panel-collapse collapse" id="collapseTopTwoMore"> 
       <div class="panel-body"> 
       <a href="#"> Box 2 body</a> 
       </div> 
      </div> 
     </div> 
     <div class="panel panel-default col-lg-2"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
       <a href="#collapseTopThreeMore" data-toggle="collapse" data-parent="#Heyaccordion">Box 3</a> </h4> 
      </div> 
      <div class="panel-collapse collapse" id="collapseTopThreeMore"> 
       <div class="panel-body"> 
       <a href="#"> Box 3 body</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

В JScript

$(".panel-heading").mouseenter(function() { 
    $(".panel-collapse").fadeIn(); 
}); 
$(".panel-collapse").mouseleave(function(){ 
    $(".panel-collapse").fadeOut(); 
});

источник

2016-09-30 Jinnie

Если ни один из этих «экспертов» не упомянул, что это звучит как катастрофа пользовательского интерфейса, я бы поставил под сомнение их экспертность. – CBroe

Плата jsfiddle? –

О, я сделал это

.panel-title > a { 
    width: 100%; 
    display: block; 
}

и вся панель кликабельна ... но она по-прежнему требует щелчок.

источник

2016-09-30 15:45:04 Jinnie

Я подозреваю, что это связано с классом collapse, который находится на элементе панели-collapse или даже в обоих классах. Классы - это те, которые заставляют панель рухнуть. Таким образом, просить постепенно исчезать и выходить за рамки класса коллапса. Я бы поставил предупреждение в событии mouseneter и mouseover, чтобы подтвердить, что событие поднято, как ожидалось. Если эта работа затем попытается добавить и удалить класс collapse – Van

Я не вижу никаких действий с кодом. Это как если бы код не существовал. Затем я помещаю предупреждение(), чтобы увидеть, что код загружен. Предупреждающее сообщение появляется при обновлении, но ни один из зависаний не появляется. Я забыл упомянуть, что этот код находится в SharePoint как веб-часть вместе с календарями и другими конструкциями по умолчанию на той же странице. Считаете ли вы, что существует конфликт? – Jinnie

Итак, событие правильно подключено. Я не думаю, что это будет столкновение с точкой обмена, но это определенно возможно. Я все еще думаю, что это потому, что класс «коллапса» присутствует. Это класс «collapse», который отображает его как свернутый. Вы пытались удалить свернутый класс при выполнении мыши над событием? – Van

Я не 100% уверен, что класс, чтобы дать тот, который вы не хотите, чтобы свернуть (например, расширить?) Но это должно снять «рухнуло» класс от только один, который вызвал событие:

$(".panel-heading").mouseenter(function() { 
    $(this).click(); 
}); 
$(".panel-collapse").mouseleave(function(){ 
    $(this).click(); 
});

Надеюсь, что это сработает для вас.

источник

2016-10-02 08:48:34 Van

Ничего не происходит после ввода кода. Аккордеон пока только открывается и закрывается, когда я нажимаю на него. При движении мыши над панелью нет эффекта автоматического открытия. Пожалуйста, помогите- – Jinnie

Вы пытались запустить событие click при вводе мыши и событии мыши. Из вашего объяснения кажется, что событие click делает переключение аккордеона. Поэтому было бы разумно, что событие click решит это. – Van

Как сделать столбцы/аккордеон открытым (или свернуть), когда мышь перемещается (или выходит) на панель?

ответ

Смежные вопросы