Question

我对编码很陌生，而且我有点坚持使用手风琴式设备。我正在尝试制作。

这个想法是有4个div元素，而在它们下面是另一个div。单击4个div中的一个时，相关文本将显示在框中;单击另一个，第一个div的文本消失并更改为另一个。点击相同，该框就会消失。

我的游戏计划：将相同的类分配给应该隐藏的所有元素，并在网站启动时隐藏它们;单击div时，仅显示具有相应ID的元素。

目前，即使只有一个div，我仍然坚持使用它，我不知道为什么。如果你能告诉我问题出在哪里，我将不胜感激。

到目前为止我的代码（现在只有2个div，以减少杂乱）：

HTML：

<div class="expander" id="first-p">Click this text to see the one below.</div>
<div class="expander" id="second-p">Another clickable div.</div>
<div class="concealed" id="concealed-first-p">This is the hidden text.</div>
<div class="concealed" id="concealed-second-p">This is another hidden text.</div>

JQUERY：

$(document).ready(function() {
    $(".concealed").hide();             //hide all elements with class .concealed after site launch

    $(".expander").click(function(){             //A div which triggers the displaying of the hidden stuff is clicked


/* If the hidden div is already displayed, hide it instead and call it a day */

            if (clickedElement == $(this).attr("id")) {
                alert ("hide div again");
                $("#expandingElement").hide(); 
            }

/* Show the hidden div */

else {
            $("#expandingElement").hide();             // hide any div that might already be displayed
            var clickedElement = $(this).attr("id");            // get the ID of the clicked element so we know which correlating one to display afterwards
            var expandingElement = "concealed-" + clickedElement;            // construct the ID of the element to display
            alert("Name of expandingElement ID is " + expandingElement);             // this is just an alert so I know the variable was constructed correctly
            $("#expandingElement").show();             // show the div
            }
        });
    });

到目前为止，代码一直运行到警报显示正确的变量名称，但之后不显示div。你能告诉我我做错了什么吗？

另外，我想有更简单的方法可以做到这一点，我很乐意在这件事上提供任何帮助。但最重要的是，我想知道为什么代码没有按预期工作。

Answer 1

好像你搞砸了选择器：

您的所有div都没有ID“expandingElement”，但您调用

$("#expandingElement").hide()

这会尝试将hide（）应用于ID为expandingElement的元素。但是你想使用名为expandingElement的变量。所以你需要做的就是正确地结合这两个：

$("#"+expandingElement).hide()

Answer 2

您正在使用@Override protected void onDestroy() { super.onDestroy(); stopService(); } @Override protected void onResume() { super.onResume(); startService(); } private void stopService(){ stopService(myIntent); } private void startService(){ myIntent = new Intent(RouteDetailsActivity.this, Sendrer.class); startService(myIntent); }＆＃34;＆＃34;。所以它被视为ID。你应该使用like：

string

Answer 3

如果我是正确的，那么您似乎正在寻找与Boostrap's Tabs类似的东西

你的失败是：的 $（ “＃expandingElement”）显示（）/隐藏（）;

解决方案：的 $（ “＃” + expandingElement）.show（）/隐藏（）;

expandingElement 是一个变量，所以如果你把它插入btwn''它就变成了一个字符串。

反正：

$(document).ready(function() { $(".concealed").hide(); $(".expander").click(function(){ $(".concealed").hide(); var clickedElement = $(this).attr("id"); var expandingElement = "concealed-" + clickedElement; $("#"+expandingElement).show(); }); });

为什么这个jQuery show＆amp;隐藏脚本不按预期工作？

3 个答案: