Javascript onclick select sibling, который имеет класс

Question

Я хочу показать/скрыть 2 родственных элемента onclick.

На странице у меня есть несколько detailLinksItem, которые будут содержать эту функцию show/hide, поэтому необходимо выбрать только братьев и сестер. Мне нужно onclick до .style.display = 'block'; для обоих братьев .showLess и .moreLinksContainer.

  <div class="detailLinksItem"> 
       <div class="searchIcon"></div> 
       <a href="#"></a> 
       <a href="#"></a> 
       <div class="detailDate"></div> 
       <div class="arrow-down"></div> 
       <a href="#" class="showMore" onclick="showStuff(moreLinksContainer); return false;">Show more</a> 
       <a href="#" class="showLess" onclick="hideStuff('moreLinksContainer'); return false;" style="display: none;">Show less</a> 
       <div class="moreLinksContainer" style="display: none;"> 
       <ul> 
        <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">6 hours</div></li> 
        <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">1 day</div></li> 
        <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">3 days</div></li> 
        <li><a href="#">Link Title Goes Here!!</a><div class="moreDetailDate">1 week</div></li> 
       </ul> 
       </div> 
      </div> 

Answer 1

<script type="text/javascript"> 
    function showStuff(_container){ 
     var c = document.getElementsByClassName(_container); 
     c[0].style.display = "block"; 
    } 
    function hideStuff(_container){ 
     var c = document.getElementsByClassName(_container); 
     c[0].style.display = "none"; 
    } 
</script> 

Answer 2

Поскольку вы сказали JQuery отлично:

$(function(){ 
    // When .showMore is clicked 
    ​$(".showMore").on("click", function(){ 
     // Of all the succeeding elements, show those with these classes 
     $(this).nextAll(".showLess, .moreLinksContainer").show();  
    });​ 
    // When .showLess is clicked 
    $(".showLess").on("click", function(){ 
     // Take the next element, and this element, and hide them 
     $(this).next().andSelf().hide();  
    }); 
}); 

Демо: http://jsfiddle.net/EmNsT/ При этом, вы можете удалить onclick атрибуты из ваших ссылок:

<a href="#" class="showMore">Show more</a> 
<a href="#" class="showLess">Show less</a> 

Перемещение ваших встроенных стилей в таблицу стилей как скважина:

.showLess, 
.moreLinksContainer { 
    display: none; 
} 

Answer 3

Вы должны избегать добавления встроенных объявлений о событиях. В идеале добавьте события click в действие document.ready. Здесь са работает пример для вашего конкретного требования: http://jsfiddle.net/P8trE/

Он также имеет необходимые действия для сокрытия «показать меньше» ссылка :)

Answer 4

Я хотел бы предложить вам начать с JQuery, это поможет вам ускорить вверх по вашей разработке javascript. В вашем случае с JQuery и можно сделать:

1. удалить текущий OnClick
2. Включите библиотеку Jquery в голову

3. $ (функция() {// назначить пользовательские события $ (». showMore "). click (function() { $ (". showMore "). hide(); // скрывать кнопку show $ (". showLess "). show(); // показать скрытую кнопку $ (" .moreLinksContainer "). slideDown(); // открытый контейнер с эффектом })

   $ (". HideStuff"). Click (function() { $ (". ShowLess"). Hide(); // скрыть скрытую кнопку $ (". ShowMore"). Show(); // show show button $ (". moreLinksContainer"). slideUp(); // скрыть контейнер }) });

Answer 5

Я хотел бы добавить дополнительный класс в detailLinksItem Div с помощью JavaScript, а затем использовать каскадные CSS, чтобы показать или скрыть соответствующие дочерние элементы.

CSS:

.detailLinksItem .showLess, .detailLinksItem .moreLinksContainer { 
    display: none; 
} 
.detailLinksItem.more .showMore { 
    display: none; 
} 
.detailLinksItem.more .showLess, .detailLinksItem.more .moreLinksContainer { 
    display: block; 
} 

JS:

detailLinksItemElement.className = "detailLinksItem more";