множественный div, использующий тот же класс, открытый сразу - PullRequest
Новая
       6

множественный div, использующий тот же класс, открытый сразу

0 голосов
/ 16 августа 2011

Я использую функцию javascript для нескольких скрытых div-шоу в пользовательской теме tumblr. My Проблема в том, что имя класса одинаковое, если я нажимаю на один div, по умолчанию все div получают show или hide. 

  <script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
   $(".toggleme").click(function () {
    $(".toparea3").slideToggle("slow");
  return false;
   });
    });
</script>

<a class="toggleme" href="#"><img src="http://www.abc.com/images/share.png"></a>

<div class="toparea3" style="display:none;">
    <div class="share-bar clearfix" style=" margin-top:3px;margin-left: -2px;width: 380px;height: 50px;">
        <div class="share-bar-buttons">
            <div class="share-bar-facebook">
                <iframe src="http://www.facebook.com/plugins/like.php?href={URLEncodedPermalink}&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=lucida+grande&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
            </div>
        </div>
        <div style="margin-left:80px;margin-top: 15px;" class="share-bar-twitter">
            <a href="http://twitter.com/share" class="twitter-share-button"
                                      data-url="{Permalink}" 
                                      {block:Twitter}data-via="{TwitterUsername}"{/block:Twitter} 
                                      data-related="stylehatch:Premium Tumblr Themes by @newezra"></a>
        </div>

        <div style="float: right;margin-top:-25px;" class="share-bar-shorturl">
            <div class="linktumb">
                http://www.tumblr.com/xdrs2sf
            </div>
        </div>
    </div>
</div>

Ответы [ 4 ]

0 голосов
/ 16 августа 2011

Моя рекомендация состоит в том, чтобы присвоить div идентификатор и сделать так, чтобы href элемента привязки указывал на него: 

<script>
$(document).ready(function() {
    $(".toggleme").click(function () {
        $(this.hash).slideToggle("slow");
        return false;
    });
});
</script>

<a class="toggleme" href="#toparea3_1"><img src="http://www.abc.com/images/share.png"></a>

<div id="toparea3_1" class="toparea3" style="display:none;"></div>

Это потому, что хэш задан в форме #toparea3_1, которая является допустимым селектором jQuery, который выбирает по ID, и может использоваться напрямую.

0 голосов
/ 16 августа 2011

Если у вас есть несколько кнопок "toggleme", если они все в формате, в котором у вас есть кнопка "toggleme", а затем toparea3, вы можете сделать что-то вроде этого: 

$('.toggleme').click(function(){
    $(this).next().slideToggle('slow');
    return false;
});

Функция «next» получает следующий элемент в DOM, который является элементом, который вы хотите раскрыть.

0 голосов
/ 16 августа 2011

Редактировать: (не обращайте внимания на детей)

попробуйте использовать селектор .closest или селектор .next, предложенный кем-то другим. Просто не забудьте предоставить селектор .toparea3, чтобы убедиться, что открывается только этот класс, а не какой-либо ближайший / следующий элемент. 

$(document).ready(function() {
    $(".toggleme").click(function () {
        $(this).closest(".toparea3").slideToggle("slow");
        return false;
    });
});
0 голосов
/ 16 августа 2011

Я бы порекомендовал следующее:

Поместите «a» и соответствующий ему «div» в родительский «div».Примерно так: 

<div>
    <a class='toggleMe' />
    <div class='toparea3 />
</div>

Тогда вы можете обновить свой внутренний селектор так: 

$('.toggleMe').click(function(evt){
    evt.preventDefault();
    var parent = $(this).closest('div');
    $(".toparea3", parent).slideToggle("slow");
}
...