Как свернуть все div с изменением вкладки в jQuery Tabs UI? - PullRequest
Новая
       8

Как свернуть все div с изменением вкладки в jQuery Tabs UI?

1 голос
/ 05 апреля 2011

Я использую несколько циклов WordPress и вкладки пользовательского интерфейса jQuery, которые приводят к вкладкам Main и разметке div-содержимого входа ниже. Циклы WordPress генерируют разметку "entry-post" в каждом элементе div с вкладкой, но я не показываю php, так как результирующая разметка html в каждом элементе div с вкладками является важной частью.

Я также использую немного jQuery, чтобы независимо разворачивать / сворачивать каждый элемент ввода-содержимого: 

$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });

Я обнаружил, что каждый из div-элементов entry-content сохраняет свое расширенное состояние при переключении вкладок, то есть, если некоторые div-элементы entry-content раскрываются в tabone, и я переключаюсь на tabtwo, а затем снова на tabone, они все еще раскрыты в табоне.

Что мне нужно сделать, так это свернуть все элементы ввода-содержимого на вкладке при изменении вкладки. Ниже находится вкладка init, а также fx для изменения вкладок.

Что мне нужно добавить к этой функции, чтобы свернуть все элементы ввода-содержимого при изменении вкладки? 

$(document).ready(function(){ 
var $tabs= $("#tabs").tabs(); 
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});

Основные вкладки и разметка div начального содержания: 

<div id="tabs">
    <ul>
    <li><a href="#tabone">tabone</a></li>
    <li><a href="#tabtwo">tabtwo</a></li>
    <li><a href="#tabthree">tabthree</a></li>
    </ul>

    <div id="tabone">

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>
    </div>

    <div id="tabtwo">

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>

<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...  
</div></div>
    </div>

    <div id="tabthree">

....

</div></div>

Ответы [ 5 ]

2 голосов
/ 14 апреля 2011

Следующий код должен свернуть все .entry-content деления при выборе новой вкладки: 

$(document).ready(function() { 
    var $tabs= $("#tabs").tabs({
        fx : { 
            opacity: 'toggle' 
        },
        select : function(event, ui) {
            $(".entry-content").hide();                
        }
    }); 
});
0 голосов
/ 14 апреля 2011

Возможно, вы захотите использовать существующую библиотеку вкладок пользовательского интерфейса jquery, и это решит множество ваших проблем.

http://jqueryui.com/demos/tabs/

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

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

или загрузите ее и удалите то, что вам не нужно.Добавьте следующее в свой CSS 

.ui-tabs .ui-tabs-hide {
  display: none !important;
}

и измените ваши ссылки так, чтобы они соответствовали спецификации jqueryUI 

<div id="tabs">
<ul>
    <li><a href="#tabs-1">tabone</a></li>

, а затем идентификаторы div для совпадения 

  <div id="tabs-1">
    <div class="entry-post">

это должно сделать ассоциацию.Затем вы можете добавить управляющее поведение, чтобы оно читало 

$(document).ready(function(){

    $(function() {
            $('#tabs').tabs();
        });

, и это избавит вас от необходимости хранить массив div

, после чего вы сможете привязать функцию к событию tabselectкоторый будет скрывать элементы, которые вы хотите свернуть 

$('#tabs').bind('tabsselect', function(event, ui) {
            $('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
        });

ваш код должен выглядеть так: 

<head>
<title>Collapse Divs</title>
<style type="text/css">

    .ui-tabs .ui-tabs-hide {
        display: none !important;
    }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $(function() {
            $('#tabs').tabs();
        });

        $('#tabs').bind('tabsselect', function(event, ui) {
            $('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
        });

        $(".entry-content").hide();

        $(".entry-title").click(function() {
            $(this).parent().children(".entry-content").slideToggle(500); 
            });

});
 </script>
</head>
<body>
    <div id="tabs">
    <ul>
    <li><a href="#tabs-1">tabone</a></li>
    <li><a href="#tabs-2">tabtwo</a></li>
    <li><a href="#tabs-3">tabthree</a></li>
    </ul>

<div id="tabs-1">
    <div class="entry-post">
...
    <h1 class="entry-title">Title 3.3</h1>
        <div class="entry-content">Lorem ipsum...</div>
    </div>
</div>

</body>
0 голосов
/ 12 апреля 2011

Я не уверен, что понимаю ваш вопрос полностью.Но если вы не хотите проверять, запущена ли вкладка или нет, попробуйте использовать это: 

$( ".selector" ).tabs({
  show: function(event, ui) { ... }
});

Упрощенно, как вы можете свернуть все div с классом "entry-post", всякий раз, когда вкладка отображается:

$(document).ready(function(){ 
  var $tabs = $("#tabs").tabs({
    show: function(){
      $('.entry-post').hide();
    }
  });
});
0 голосов
/ 14 апреля 2011

Я не эксперт по jQuery, так что вот прямой javascript.Может, по крайней мере, помочь решить проблему ...
Поскольку вам все равно, на какой вкладке находится div (поскольку все div должны быть скрыты при смене вкладки), вы можете просто скрывать все div на странице каждый раз, когдавкладка изменяется независимо от того, на какой вкладке она находится. 

var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
  divitem.style.display = "none";
}

Хотелось бы, чтобы мой jQuery был сильнее, чтобы я мог дать ему это, но это может помочь ...

Редактировать: ПростоГлядя на ваш пример кода, я думаю, что-то вроде этого в jQuery: 

$("#tabs a").click(function() { $(".entry-content").hide(); });

Что-то, что закрывает все div класса entry-content при нажатии любой вкладки.

0 голосов
/ 12 апреля 2011 
$("div.post [name^="entry-title"]").hide();

должен делать то, что вы хотите, когда прикреплен рядом с вашей валютой.

или: 

$("#tabs a").click(function () {
  $("div.post [name^="entry-title"]").hide();
});
...