javascript - 检查元素显示子 div

Question

我以前从未听说过这个，我真的很困惑。 交易是我有以下代码，

Javascript

$(document).ready(function () {
    showSideBar('sbselection_1');
    $('.talkbubble').click(function () {
        var sidebarSelector = $(this).find('.tbselector').val();
        showSideBar(sidebarSelector);
    });
    $('.clickables').on('click','.talkbubble',function () {
        $(this).siblings('.talkbubble').removeClass('clicked');
        $(this).addClass('clicked');
    });

});
function showSideBar(selector) {
    $('.sidebarContent').hide();
    $('.sidebarContent.' + selector).show();
}

CSS

 .sidebar{ 
position: absolute;
background-color: rgb(153,153,153);
width: 250px;
height: 300px;
}
.sidebarcontent{
display:none;
overflow:hidden;
}
.clickables {
position: absolute;
left: 270px;
}           
.talkbubble {
background: white;
color: rgb(0,0,0);
font-family: Rockwell, Garamond, "MS Serif", "New York", serif;
font-size: 12px;
height: 40px;
margin-top: 1%;
margin-bottom: 20px;
position: relative;
width: 130px;   
z-index: 5;
}

.talkbubble:before {
border-top: 10px solid transparent; 
border-right: 10px solid white; 
border-bottom: 10px solid transparent; 
content:""; 
height: 0; 
position: absolute; 
right: 100%; 
top: 10px; 
width: 0;   
}
.clicked {
background:rgb(153,153,153);
}
.clicked:before {
border-right-color:rgb(153,153,153);
}
.talkbubble:hover{
background-color: rgb(112,112,112);
color: rgb(255,255,255);
 }
.talkbubble:hover:before {
border-right-color: rgb(112,112,112);
 }

.thumbnail {
height: 33px;
width: 30px;
float: left;
position: absolute;
margin: 4px;
z-index: 2;
left: 2px;
top: 0px;
}
.words {
height: 24px;
width: 150px;
position: absolute;
float: right;
left: 40px;
top: 10px;
}
#orangetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;  
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(255,138,0);
}
#dkpurpletriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;  
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(120,3,105)
}
#powderbluetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;  
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(99,89,288);
}

HTML 事件一

    <div class="talkbubble">
        <input type="hidden" class="tbselector" value="sbselection_2" />
        <div class="thumbnail">
           <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
        </div>
        <div class="words">Event 2</div>
    </div>

    <div class="talkbubble">
        <input type="hidden" class="tbselector" value="sbselection_3" />
        <div class="thumbnail">
           <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
        </div>
        <div class="words">Event 3</div>
    </div>
</div>

你可以在这个 fiddle 上看到它 https://jsfiddle.net/petiteco24601/rhjw8uzm/9/

它很棒很漂亮，并且完全符合我的要求。 接下来我把它放在我放在一起的一个html页面上，你可以在这里看到它: http://www.emich.edu/dining/draft/index.html 同样，这个按钮显示效果非常好，并且完全按照我的意愿进行。 然后我不得不通过一个特定的服务器并使用他们的系统——我有点不熟悉并且真的迫使你把所有东西分开，不仅仅是通过文件夹，而且基本上你有两个库一起工作以将适当的 css，javascript 组合在一起, 和 HTML。因此，您可以看到我确实有很多(根据我更好的判断)内联样式和在标题而不是在单独的工作表中包含 javascript。尽管如此

http://webstage.emich.edu/dining-new/index.php

如果您点击“检查源代码”，您会看到我在处理它时看到的内容。可点击的显示看起来与 jsfiddle 上的显示几乎相同 - 但您点击 Inspect Element 并且您会看到所有 <div class="sidebarContent">相互嵌入。因此，它不会显示适当的图片来填充 <div class="sidebar">。区域。

有什么想法吗？？？请谢谢!

Answer 1

看起来问题是您对内部 div 使用了自关闭语法的 .sidebarContent像 <div id="eetriangle" /> 这样的元素而不是使用 <div id="eetriangle"></div> .

演示:Problem , Solution

• What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?