单击时切换css显示值

时间:2014-03-08 13:51:58

标签: jquery html

每次点击都来回尝试.toggle css显示属性的值(在元素父元素上)。香港专业教育学院设法切换节目不显示我想要的嵌套ul。但我无法在父母的inline-block切换到inline。我该怎么办呢。

HTML

<ul>
    <li class="reveal">
        Test<br />
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
</ul>

的jQuery

$('.reveal').click(function() {
    $(this).parent('ul').css('display', 'inline');
    $(this).children('ul').slideToggle();
});

2 个答案:

答案 0 :(得分:2)

试试这个。

<强> HTML

<ul class="disInlineBlock">
  <li class="reveal">Test<br />
    <ul>
      <li>a</li>
      <li>b</li>
      <li>c</li>
    </ul>
  </li>
</ul>

<强> CSS

.disInlineBlock{display:inline-block;}
.disInline{display:inline;}

<强>脚本

$('.reveal').click(function() {
    $(this).parent('ul').toggleClass('disInline');
    $(this).children('ul').slideToggle();
});

答案 1 :(得分:1)

您可以尝试类似

的内容
$('.reveal').click(function () {
    var parent = $(this).parent('ul');
    if (parent.css('display') === 'inline') {
        parent.css('display', 'inline-block');
    } else {
        parent.css('display', 'inline');
    }
    $(this).children('ul').slideToggle();
});