Javascript 检查元件DIP和子DIV

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

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

HTML 事件1

事件2
事件3

你可以在这把小提琴上看到

这是伟大的，美丽的，正是我想要它做的。 接下来我把它放在一个html页面上，你可以在这里看到它： 同样，这个按钮显示屏工作得非常好，完全符合我的要求。 然后我必须通过一个特定的服务器使用他们的系统——我对这个系统有点不熟悉，它迫使你把所有的东西都分开，不仅仅是文件夹，基本上你有两个库一起工作，把合适的css、javascript和html放在一起。因此，您可以看到，我确实有很多内联样式（与我更好的判断相反），并且在页眉处包含javascript，而不是在单独的工作表中。尽管如此

如果你点击“检查源代码”，你会看到我在处理它时看到的东西。可点击的显示看起来与JSFIDLE上的显示几乎相同-但是点击Inspect元素，您会看到所有的

都嵌入在彼此的内部。因此，它不会显示适当的图片来填充

区域

---

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

问题似乎是您对

.sidebarContent

元素的内部

div

使用了自动关闭语法，如

，而不是使用

演示：

---

看起来问题在于您对

.sidebarContent

等元素的内部

div

使用了自动关闭语法，而不是使用

演示：

---

如果您在

和中都清楚地注意到，则您有以下代码






.可点击{
位置：绝对位置；
左：270px；
}

如果您没有，只需添加以下内容，其工作原理相同：）

如果您在
和中都清楚地注意到了，那么您有下面的代码






.可点击{
位置：绝对位置；
左：270px；
}

如果您没有，只需添加以下内容，其工作原理相同：）

所以我对我们正在使用的服务器进行了研究。事实证明，我认为图书馆解析信息的方式有问题是正确的。具体来说，当库将所有内容放在一起时，它不知道如何处理一个空框，因此会立即开始在其中嵌入其他框，从而有效地破坏代码。简单的解决方法：只需在每个空框中添加一条html注释，程序就会认为该注释已填充，因此不会对其进行处理

谢谢大家的帮助和建议
 所以我对我们正在使用的服务器进行了研究。事实证明，我认为图书馆解析信息的方式有问题是正确的。具体来说，当库将所有内容放在一起时，它不知道如何处理一个空框，因此会立即开始在其中嵌入其他框，从而有效地破坏代码。简单的解决方法：只需在每个空框中添加一条html注释，程序就会认为该注释已填充，因此不会对其进行处理

谢谢大家的帮助和建议
 它在chrome和safari中运行良好。请具体说明这个问题。侧边栏内容彼此之间没有嵌入。它们都被放置在sidebarIt的铬合金和safari中工作良好。请具体说明这个问题。侧边栏内容彼此之间没有嵌入。它们都放在sidebarIn safari中，它的渲染正确。@mohamedrias看看我的chrome中小提琴（问题）的渲染方式——应该是Oops yes。我看了一下url草稿。正如您在另一个链接中提到的，div是自动关闭的，这导致了问题+谢谢你的帮助@ArunPJohny！我唯一的想法是，我回去仔细检查了一遍，我正确地关闭了所有的角三角形。还有其他一些因素迫使它将所有的兄弟姐妹嵌入到彼此中，而可点击的显示只显示顶部的照片，没有其他可点击的图像。在safari中，它的渲染是正确的。@mohamedrias看看我的chrome中小提琴（问题）是如何渲染的——它应该是类似于Oops的是的。我看了一下url草稿。正如您在另一个链接中提到的，div是自动关闭的，这导致了问题+谢谢你的帮助@ArunPJohny！我唯一的想法是，我回去仔细检查了一遍，我正确地关闭了所有的角三角形。还有一件事迫使它将所有的兄弟姐妹嵌入到彼此中，而可点击的显示器只显示最上面的照片，没有其他可点击的图像。非常感谢你，卡维内什，但我想我不太清楚你想指出什么？问题是.sidebarContent没有显示正确的图像。我相信这是因为服务器将div框解析在一起的方式，它们正在成为嵌入的子元素，而不是兄弟元素，因此javascript无法正确地拉出相应的div来与clickable匹配。非常感谢你，Kawinesh，但我想我不太清楚是什么
 .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);
}

    <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>

.clickables {
  margin-left: auto;
  position: absolute;
  left: 333px;
}