Несколько jScrollPanes перекрываются и препятствуют доступу к другим - PullRequest
Новая
       8

Несколько jScrollPanes перекрываются и препятствуют доступу к другим

2 голосов
/ 18 декабря 2011

У меня есть веб-сайт «1 страница», в котором содержание меняется с помощью jQuery при нажатии на ссылку.

Вот пример макетов DIV: 

<div id="div1" class="scroll-pane">
</div>
<div id="div2" class="scroll-pane">
</div>
<div id="div3" class="scroll-pane">
</div>

Таким образом, когда вы нажимаете на одну ссылку, например, «div1» исчезает, а «div2» (ранее скрытый) будет появляться на своем месте. Все DIV имеют одинаковые позиции CSS друг с другом. Все мои DIV имеют jScrollPane, но кажется, что они накладываются друг на друга, и панель div3 все время рисуется поверх других. Я предполагаю, что это связано с порядком их создания в HTML, может быть? Панель 2 - выше панели 1, а панель 3 - выше панели 2 и 1.

Таким образом, даже когда все содержимое div3 скрыто, его панель остается видимой и перекрывает остальные два DIV. Так что я могу отвлекаться только с возможностью прокрутки в div3, в то время как другие DIV находятся «под» и недоступны.

Я могу скрыть JScrollPanes, но мне кажется, что я могу обрабатывать их все одновременно. Если я скажу jScrollPane скрыть, они все скрываются ... Я попытался изменить zIndex DIVs, а не классы jScrollPane, когда они исчезают, но это не меняет zIndex самих панелей. Поскольку я также скрыл DIVs, но панели остались позади.

Есть ли способ индивидуального управления jScrollPanes и изменения их zIndex или их фактического скрытия вместе с DIV, при этом все они не исчезают?

Помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 15 февраля 2012

Полагаю, вы когда-нибудь хотели показать только один и используете jquery.

Вы правы в том, что это связано с html-порядком div 3, последний, поэтому естественно, что если поместить его в то же место, что и другой div, он будет загружаться в том же месте над другими объектами.

В jquery вы можете изменить свойство z-index для div или любого html-элемента, выполнив:

$(#div1).css(z-index, 1); // для div

$(.scroll-pane).css(z-index, 1); // для классов

обратите внимание на разницу между # и. для вызова классов или идентификаторов.

Посмотрите следующую статью о понимании z-индексации:

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Вы прячете все JScrollPanes, потому что когда вы делаете что-то вроде:

$(.scroll-pane).hide();

Он получит все классы с назначенной им панелью .scroll, что означает, что он получит все три в вашем примере.

Чтобы решить эту проблему, нужно указать уникальное имя класса, например .scroll-pane-1 .scroll-pane-2, для каждой панели, которую вы хотите индивидуально скрыть, и затем создать jquery, который будет:

$(.scroll-pane-1).hide();

$(.scroll-pane-2).show();

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

В вашем случае вы можете просто: 

<script>
var index = 0

$('#target').click(function() {

if(index == 0)
    {
        `$(#div1).hide();`
        `$(#div2).show();`
        `$(#div3).hide();`
         index = 1;

    }
if(index == 1)
    {
        `$(#div1).hide();`
        `$(#div2).hide();`
        `$(#div3).show();`
         index = 2;
    }
if(index == 2)
    {
        `$(#div1).show();`
        `$(#div2).hide();`
        `$(#div3).hide();`
         index = 0;
    }

});
</script>

Это даст результат, так как у вас уже есть уникальные идентификаторы div, и мы можем вызвать show и скрыть их, используя селектор jqueries.

Мы создали целочисленную переменную, которая изменяется в зависимости от щелчка, поэтому при нажатии на ссылку или кнопку с тегом id целевого объекта мы проверяем, какое значение представляет собой целое число, и на основании его значения мы можем показать различные результаты, когда в следующий раз при щелчке по значению будет отличаться, следовательно, показывая и скрывая различные объекты.

...