Jquery - на классе клика - получить другие классы

Question

Пожалуйста, смотрите мой предыдущий вопрос, который я решен с помощью тонкой StackOverflow сообщества, здесь: jQuery How to get element id based on what was clicked AND get child element Id

, который приносит мне к моему текущему вопросу с участием аналогичного кода в контексте выше почты.

В настоящее время у меня есть набор категорий (разделов), которые при нажатии на них становятся видимыми внутренняя информация (внутренняя секция). Затем при повторном нажатии информация снова скрывается.

Мой вопрос: так как у меня есть 5 или более внешних секций, как я могу его получить, когда я нажимаю на ОДИН из этих разделов, он захватывает имена других разделов и закрывает их? Потому что, поскольку он имеет место, если у меня есть один открытый, и я иду открыть другой, оба будут оставаться открытыми. Если пользователь откроет один, я предпочел бы, чтобы остальные закрылись.

Также, когда у меня есть код, когда он открыт, для его открытия требуется два клика на другой раздел. Просмотрите JSFiddle.

См. Этот JSFiddle для рабочего примера, если это сбивает с толку. , но я столкнулся с проблемой, которая превалирует как с моим кодом, так и с приведенным ниже. Я имею в виду, чтобы секции открывались и закрывались при нажатии на внешнюю секцию. Но, поскольку он стоит, внутренняя секция при нажатии также закрывает секцию. Я не хочу, что, поскольку внутренние секции будут иметь некоторые интерактивные элементы Код:

$(document).ready(function(){ 
var isClicked = 0; 
var whatsClicked; 
$(".workSect").click(function() { 
    isClicked++; 
    whatsClicked = $(this).find(".innerSect") 
    //alert(isClicked); 
    clickerCheck(); 
}); 
function clickerCheck() { 
    if(isClicked == 1){ 
     whatsClicked.first().css({'visibility' : 'visible', 'display' : 'inline'}); 
     //alert(isClicked); 
    } 
    else if(isClicked >= 2){ 
     whatsClicked.first().css({'visibility' : 'hidden', 'display' : 'none'}); 
     isClicked = 0; 
    } 
    else { 
     whatsClicked.first().css({'visibility' : 'hidden', 'display' : 'none'}); 
     isClicked = 0;  
     } 
} 

});

https://jsfiddle.net/5k46e4sr/3/

Answer 1

Вы не должны использовать счетчик, просто проверить видимость

$(document).ready(function() { 
 
    var $inners = $('.workSect .innerSect'); 
 
    $(".workSect").click(function() { 
 
    var $inner = $(this).find('.innerSect'), 
 
     visible = $inner.is(':visible'); 
 
    $inner.css({ 
 
     'visibility': visible ? 'hidden' : 'visible', 
 
     'display': visible ? 'none' : 'block' 
 
    }); 
 
    $inners.not($inner).hide(); 
 
    }); 
 
});

#workPort { 
 
    width: 100%; 
 
    display: block; 
 
    float: left; 
 
    text-align: left; 
 
} 
 
.workSect { 
 
    float: left; 
 
    display: block; 
 
} 
 
.workSect h2 { 
 
    display: inline; 
 
    cursor: pointer; 
 
} 
 
.arrowImg { 
 
    display: inline; 
 
    cursor: pointer; 
 
} 
 
.innerSect { 
 
    visibility: hidden; 
 
    display: none; 
 
} 
 
.innerSectVis { 
 
    visibility: visible; 
 
} 
 
#innerSectLogo {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<article id="workPort"> 
 
    <section class="fluid workSect" id="outerSectLogo"> 
 
    <h2>Logo - Business Card Design</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectLogo"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectCovers"> 
 
    <h2>Publication Covers</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectCovers"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectBook"> 
 
    <h2>Book Covers</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectBook"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectAd"> 
 
    <h2>Advertisements</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectAd"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectBanner"> 
 
    <h2>Banner Advertisements</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectBanner"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectMotion"> 
 
    <h2>Motion Advertisements</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectLogo"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectOther"> 
 
    <h2>Other Designs</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectOther"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
</article>

---

Это можно упростить, если вы не хотите установленное правило видимости

$(document).ready(function() { 
 
    var $inners = $('.workSect .innerSect'); 
 
    $(".workSect").click(function() { 
 
    var $inner = $(this).find('.innerSect').toggle(); 
 
    $inners.not($inner).hide(); 
 
    }); 
 
});

#workPort { 
 
    width: 100%; 
 
    display: block; 
 
    float: left; 
 
    text-align: left; 
 
} 
 
.workSect { 
 
    float: left; 
 
    display: block; 
 
} 
 
.workSect h2 { 
 
    display: inline; 
 
    cursor: pointer; 
 
} 
 
.arrowImg { 
 
    display: inline; 
 
    cursor: pointer; 
 
} 
 
.innerSect { 
 
    display: none; 
 
} 
 
.innerSectVis { 
 
    visibility: visible; 
 
} 
 
#innerSectLogo {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<article id="workPort"> 
 
    <section class="fluid workSect" id="outerSectLogo"> 
 
    <h2>Logo - Business Card Design</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectLogo"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectCovers"> 
 
    <h2>Publication Covers</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectCovers"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectBook"> 
 
    <h2>Book Covers</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectBook"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectAd"> 
 
    <h2>Advertisements</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectAd"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectBanner"> 
 
    <h2>Banner Advertisements</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectBanner"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectMotion"> 
 
    <h2>Motion Advertisements</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectLogo"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
    <section class="fluid workSect" id="outerSectOther"> 
 
    <h2>Other Designs</h2> 
 
    <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg" /> 
 
    <hr/> 
 
    <section class="fluid innerSect" id="innerSectOther"> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
     <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content.</p> 
 
    </section> 
 
    </section> 
 
</article>