SlideToggle несколько div в повторителе

Question

SlideToggle несколько div в повторителе

0

Я использую ниже код для SlideToggle разделов в Repeater. Поскольку это ретранслятор, я не могу зафиксировать правильный идентификатор для второго div. Когда я нажимаю на панель, функция SlideToggle for Description работает правильно, но местоположение всех элементов в ItemTemplate переключается в одно и то же время независимо от того, какая панель элементов нажата. Каков правильный способ скольжения? Перетащите несколько div в ретрансляторе? См. Ниже код:

<ItemTemplate>
<div class="memberImage">
<asp:Image ImageUrl="~/Content/images/image1.jpg" runat="server"/>
 <div id="location" style="background-color:lightgrey; width:180px; height:200px; display:none;z-index:-30;margin-top: -20px;">

  </div>
</div>

<div class="memData">

   <div id="blueBar">
       <div id="Title"><%# Eval("title") %> </div>

       <asp:ImageButton style="margin-left:420px;" ID="ImageButton1" width="60" Height="60" ImageUrl="~/Content/images/down_arrow_white.png" runat="server" />

    </div>

    <div id="Description" style="display:none;" >
        <p> <%# Item.Description %></p>
     </div>
</div>
</ItemTemplate>

и код jQuery:

<script type="text/javascript">
    $(document).ready(function () {


        $('[id*="blueBar"]').click(function () {

            $(this).next().slideToggle("slow");

            $('[id*="location"]').slideToggle("slow");

        });

    });

bunnie 06 окт. 2013, в 09:38

Источник

Теги:

jquery

asp.net

slidetoggle

repeater

itemtemplate

1 ответ

Ещё вопросы

Devraj Gadhavi · Answer 1 · 2013-10-06T07-05-00.000Z

Вам нужно будет обернуть ваш ItemTemplate Repeater в контейнер div, как ItemTemplate ниже.

<ItemTemplate>
    <div class="container">
        <div class="memberImage">
            <asp:Image ImageUrl="~/Content/images/image1.jpg" runat="server"/>
            <div class="location" style="background-color:lightgrey; width:180px; height:200px; display:none;z-index:-30;margin-top: -20px;">
            </div>
        </div>
        <div class="memData">
            <div class="blueBar">
                <div id="Title"><%# Eval("title") %> </div>
                <asp:ImageButton style="margin-left:420px;" ID="ImageButton1" width="60" Height="60" ImageUrl="~/Content/images/down_arrow_white.png" runat="server" />
            </div>
            <div id="Description" style="display:none;" >
                <p> <%# Item.Description %></p>
            </div>
        </div>
    </div>
</ItemTemplate>

Используйте class вместо id для обоих blueBar и дивы местоположения.

Измените часть jQuery, как показано ниже.

<script type="text/javascript">
    $(document).ready(function () {
        $('.blueBar').click(function () {
            $(this).next().slideToggle("slow");

            //for location div you will need to traverse the DOM as below
            $(this).parent().sibling().find('.location').show().slideToggle("slow");
        });
    });
</script>

Спасибо за ваш ответ Devraj! Я сделал именно то, что вы предложили, но местоположение не видно. Переключатель для Описание работает, но местоположение не отображается вообще. Я что-то пропустил?
@bunnie, посмотрите мой отредактированный ответ сейчас, я пропустил, что вы задали style="display:none;" , Вы можете использовать функции jQuery .hide() и .show() чтобы скрыть или показать любой элемент DOM.