0

我在此列表上切换时遇到问题：

<div id="list">

    <div id="segment">      // <--- when clicked, toggle segm_content and opener
          <div id="opener">
              <img src="images/open.png" />   // changes when toggled
          </div>
          <div id="segm_content">
              // content to hide/show
          </div>
    </div>

    <div id="segment">      // <--- when clicked, toggle segm_content and opener
          <div id="opener">
              <img src="images/open.png" />   // changes when toggled
          </div>
          <div id="segm_content">
              // content to hide/show
          </div>
    </div>

    ... //and so on

</div>

我想单击"#segment"来切换子 *"#segm_content"* 并在"#opener"中更改 img 。

我使它使用以下代码：

$('#segment').toggle(function() {
    $('#opener').html('<img src="images/open.png"/>');
    $('#segm_content').hide(500);
}, function() {
    $('#opener').html('<img src="images/close.png"/>');
    $('#segm_content').show(500);
});

但我不知道如何一次只为一个“#segment”做这件事。
这段代码切换了我不想要的一切。

我被困在这一点上，请问有什么建议吗？
非常感谢！

4

2 回答 2

0
常规主题设置 背景颜色 文本颜色 
          <div class="Settings" id="GTSettings">
            <h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
            <div class="options">
                <table>
                    <tr>
                        <td><h4>Back-Ground Color</h4></td>
                        <td><input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly"></td>
                    </tr>
                    <tr>
                        <td><h4>Text Color</h4></td>
                        <td><input type="text" id="body-fontColor" class="themeselector" readonly="readonly"></td>
                    </tr>
                </table>
            </div>
        </div>

$(文档).ready(函数(){

 $(".options").hide();

$(".SettingsTitle").click(function(e) { var appThemePath = $("#appThemePath").text();

                var closeMenuImg = appThemePath+'/images/toggle-collapse-light.gif';
                var openMenuImg = appThemePath+'/images/toggle-collapse-dark.gif';

                var elem = $(this).next('.options');
                $('.options').not(elem).hide('fast');
                $('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
                elem.toggle('fast');
                var targetImg  =  $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ?  openMenuImg :  closeMenuImg;
                $(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);


            });

});

于 2014-06-02T06:46:16.373 回答
0

我真的不推荐这个。an 的要点id是引用一个独特的元素。如果你想选择多个元素，你应该定义一个class而不是让 jQuery 调用它。多个ids 是无效的 HTML。但是，您可以通过将 jQuery 代码更改为以下内容来做到这一点。

（这是我的 jsFiddle：http: //jsfiddle.net/KzVmK/）

$('[id="segment"]').toggle(
 function(){
  $(this).find('[id="opener"]').html('<img src="open.png" alt="Close" />');
  $(this).find('[id="segm_content"]').hide(500);
 },
 function(){
  $(this).find('[id="opener"]').html('<img src="close.png" alt="Open" />');
  $(this).find('[id="segm_content"]').show(500);
 }
);​

再次强调，这是一个坏主意，因为您id的文档中不会有唯一的选择器。这是非常糟糕的做法。有时您会想要在 DOM 中选择一个单独的元素，而这几乎是不可能的。我强烈建议您class为元素定义 a （您仍然可以定义 CSS classes，例如<div class="opener my-class" />or <div class="segm_content my-class" />）。

（此外，此代码的一个有用提示：不要使用同样在 jQuery 代码中的相同图像填充 HTML 元素 [这是多余的]，将<div id="opener" />元素留空。然后，在定义toggle函数之后，立即运行click事件，就像这样：http: $('[id="$segment"]').toggle(...).click(); //jsfiddle.net/XPXBv/）。

于 2012-07-03T15:26:16.423 回答