Question

我有一点css问题。有一个div只显示一个帮助标记的图像。我尝试的是点击这个图像显示同一级别的下一个div：inline-block。在第二次单击时，它再次显示：none。

显示：inline-block on：active正在运行，但它没有切换。

有JQuery：

(function($) {

// Execute after the page was fully 
setTimeout( function(){
if ($('#jsonPayload').length) {
// scope to JSD 
var banner = jQuery('<div class="helpmark">'                  
+ '<img class="emoticon" align="adsmiddle" src="@contextPath/plugins/cute/static/resource/SD-CGM-TT/help_16.gif" />'
+ ' @message' 
+   '</div>');
banner.insertBefore('div.description'); 
}
}, 1)
})(jQuery);

我们正在寻找的元素周围的HTML

<div class="helpmark">
    <img class="emoticon" src="http://*********/plugins/cute/static/resource/SD-CGM-TT/help_16.gif"> </div>
<div class="description">
    <p>Hier können Sie einen kurzen Betreff einfügen</p>
</div>

单击.helpmark .description显示

我有CSS

.helpmark {
    cursor: pointer;
    display: inline-block;
    margin-top: 5px;
}

.helpmark:active + .description {
    display: inline-block;
}

.description {
    display: none;
}

我希望有人可以帮助我。

祝你好运，斯蒂芬

Answer 1

使用jquery很简单，请尝试以下代码。

＆＃13;

$('.helpmark').click(function(){
  $('.description').toggle();
});

＆＃13;

.helpmark{
  width: 30px;
  height: 30px;
  background: red;
}
.description{
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="helpmark"> </div>
<div class="description">
    <p>Hier können Sie einen kurzen Betreff einfügen</p>
</div>

＆＃13;

Answer 2

＆＃13;

$(".tab_button").click(function(){
	$(".tab_description").slideToggle();
});

＆＃13;

.tab_button{
  background: #990000 none repeat scroll 0 0;
    cursor: pointer;
    height: 30px;
    width: 40px;
}
.tab_description{
  	border: 1px solid #000000;
    display: none;
    max-width: 500px;
    padding: 15px;
    text-align: justify; 
}
.tab_description p{
	margin:0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab_button"> </div>
<div class="tab_description">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis massa nec odio rutrum, eget luctus metus vestibulum. Aliquam id volutpat eros, sit amet imperdiet risus. Vivamus a nisi enim. Curabitur accumsan rutrum egestas. Morbi orci purus, vehicula non risus ac, auctor tincidunt tortor. Vivamus felis lectus, scelerisque sed turpis vel, aliquet vehicula tellus. Vestibulum sit amet lorem sodales, malesuada purus a, dapibus turpis. Phasellus imperdiet eros leo, sit amet sollicitudin neque sodales non. </p>
</div>

＆＃13;

Answer 3

您可以使用.toggleClass()在.helpmark元素上添加/删除活动类，然后添加一些CSS来显示/隐藏基于该类的兄弟，如下所示：

CSS：

.helpmark.active + .description {
  display: inline-block;
}
.description {
  display: none;
}

jQuery的：

// Execute after the page was fully 
setTimeout( function(){
if ($('#jsonPayload').length) {
// scope to JSD 
var banner = jQuery('<div class="helpmark">'                  
+ '<img class="emoticon" align="adsmiddle" src="@contextPath/plugins/cute/static/resource/SD-CGM-TT/help_16.gif" />'
+ ' @message' 
+   '</div>');
banner.insertBefore('div.description'); 

  // Add this part to your script:
  banner.on('click',function() {
    $(this).toggleClass('active');
  });

}
}, 1)
})(jQuery);

这是Codepen example

Answer 4

看到有很多好的答案有点令人沮丧但是当我添加评论时因为有一点问题没有人在阅读它。

我是一个带脚本的绝对新手，我很抱歉需要更多的帮助，然后你才能正常预期。

Answer 5

// code 
(function($) {
// Execute after the page was fully 
setTimeout( function(){
if ($('#jsonPayload').length) {
// scope to JSD 
var banner = jQuery('<div class="helpmark">'
+ '<img class="emoticon" align="adsmiddle" src="@contextPath/plugins/cute/static/resource/SD-CGM-TT/help_16.gif" />'
+ ' @message'
+   '</div>');
banner.insertBefore('div.description'); 
$('.helpmark').click(function(){
  $(this).next('.description').toggle();
});
}
}, 1)
})(jQuery);

为我解决这个问题

toggle伪类：使用css / jquery激活

5 个答案: