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 活动1

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

你可以在这个小提琴上看到它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)?

Answer 2

如果您已在.clickables中清楚地注意到您有以下代码

https://jsfiddle.net/petiteco24601/rhjw8uzm/9/
http://webstage.emich.edu/dining-new/index.php

.clickables { position: absolute; left: 270px; }

如果您没有，只需添加以下内容并且它的工作方式相同：）

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

enter image description here

Answer 3

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

感谢大家的帮助和建议！

检查显示子div的元素

3 个答案: