在按钮上显示/隐藏某些div，并带有JQuery按钮单击

问题描述：

我试图在单击按钮时隐藏/显示/切换div。我使用ASP.NET，一切都在ASP：Datalist中。在按钮上显示/隐藏某些div，并带有JQuery按钮单击

我可以正确显示或隐藏div。然而，它会打开所有的div，而不是只选择按钮的那个div。该div正试图显示/隐藏是。内容

如何才能打开该按钮所属的div？

的jsfiddle - 这里的问题的一个例子http://jsfiddle.net/kMEre/

脚本：

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery(".content").hide(); 
    }); 
</script> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery('#man').live('click', function (event) { 
      jQuery('.content').toggle('show'); 
     }); 
    }); 
</script>

DataList控件（ASP.NET）

<asp:DataList runat="server" id="dgQuestionnaire" DataKeyField="QuestionID" > 
    <ItemTemplate> 
     <div class="question_box"> 
      <p class="small_bold">Question <asp:Label ID="lblOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label></p> 
      <div class="Questions"> 
       <div class="heading"> 
        <asp:HiddenField ID="hiddenQuestionID" runat="server" Value='<%# Eval("QuestionID") %>' /> 
        <asp:TextBox runat="server" ID="tbQuestionName" Text='<%# Eval("QuestionText") %>' CssClass="form" Width="300px"></asp:TextBox> 
        <input type='button' id='man' value='hide/show'> 
       </div> <!-- end heading --> 
       <div class="content"> 
        <p class="small_bold new">Question Type</p> 
        <asp:DropDownList runat="server" ID="QuestnType" CssClass="question_dropdown"> 
        <asp:ListItem Value="1">Check Boxes (Multiple Choice)</asp:ListItem> 
        <asp:ListItem Value="2">Drop Down</asp:ListItem> 
        <asp:ListItem Value="3">Open Ended</asp:ListItem> 
        <asp:ListItem Value="4">Radio Buttons (Single Choice)</asp:ListItem> 
        <asp:ListItem Value="5">Range (Percentage)</asp:ListItem> 
        </asp:DropDownList> 
        <asp:DataList ID="nestedDataList" runat="server"> 
        <ItemTemplate> 
         <p class="new">Answer <asp:Label ID="lblAnswerOrder" runat="server" Text='<%# Container.ItemIndex + 1 %>'></asp:Label></p> 
         <asp:HiddenField ID="hiddenAnswerID" runat="server" Value='<%# Eval("AnswerID") %>' /> 
         <asp:TextBox ID="TextBox1" runat="server" CssClass="form" Text='<%# Eval("AnswerID") %>' Width="300px"></asp:TextBox> 
         <asp:TextBox ID="tbAnswerText" runat="server" CssClass="form" Text='<%# Eval("AnswerTitle") %>' Width="300px"></asp:TextBox> 
        </ItemTemplate> 
       </asp:DataList> 
       <asp:Button runat="server" ID="updateName" CssClass="button_update" style="border: 0px;" onClick="UpdateQuestionName_Click" /> 
       <asp:Button runat="server" ID="btnDelete" Text="Delete" OnClientClick="return confirm('Are you sure you want to delete this question?');" /> 
      </div> 
     </div> <!-- end Questions --> 
     </div> <!-- end questionbox --> 
     <script type="text/javascript"> 
      jQuery(document).ready(function() { 
       jQuery(".content").hide(); 
      }); 
     </script> 
     <script type="text/javascript"> 
      jQuery(document).ready(function() { 
       jQuery('#man').live('click', function (event) { 
        jQuery('.content').toggle('show'); 
       }); 
      }); 
     </script> 
    </ItemTemplate>

一个id属性值只能在页面上使用一次。 – Daxcode 2012-03-25 17:52:08

答

试试这个：

这会导致div跳动。如果div被隐藏，并且我按下按钮即可：打开 - >关闭 - >打开。然后保持可见/开放。如果再次按下按钮，则反向排序。有任何想法吗？ – HGomez90 2012-03-25 18:15:17

解决：我从ASP datalist的项目模板中删除了脚本。 – HGomez90 2012-03-25 18:18:31

答

如果替代品具有类值id属性，下面的代码改变可能的工作：

jQuery('.man').live('click', function (event) { 
    jQuery(this).parents().find(jQuery('.content')).toggle('show'); 
});

对此的一般注意：正如另一条评论所述，不应该在页面上多次使用相同的id值，因为它是唯一的标识符。如果更多DOM对象具有相同的标识符，某些浏览器可能会遇到困难，以识别正确的DOM对象。 – Daxcode 2012-03-25 17:57:51

已注意到你指向并将id更改为一个类。 – HGomez90 2012-03-25 18:18:56

答

集“内容” CSS显示：无写这个。

<script type="text/javascript"> 
    $(document).ready(function() { 
     jQuery('#man').toggle(function() { 
      jQuery(".content").sliceDown(); 
     }, function() { 
      jQuery(".content").sliceUp(); 
     }); 
    }); 
</script>

在按钮上显示/隐藏某些div，并带有JQuery按钮单击

相关推荐