Question

禁用JavaScript时，使用标记显示/隐藏div。尝试调整以下示例Show hide divs on click in HTML and CSS without jQuery，但这似乎不起作用。

从这个问题How to detect if JavaScript is disabled?我认为没有一种方便的方法来检查JS是否被禁用，如：

if(JS is disabled){
     // show <a> tag that words with jQuery to display div
} else {
    // show label to show/hide div onclick
}

任何想法都会受到欢迎。

问题当禁用JavaScript时，如何制作“a”标签以显示存储在“div”中的迷你登录表单。因为什么时候启用它？

以下是标签“a”和“div”的相应代码。

<ul class="nav nav-bar pull-right" >
<li class="dropdown" id="menuLogin">

<a class="dropdown-toggle" href="#" for="_1" data-toggle="dropdown" id="navLogin">Login</a>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
    <?php 
        $form_sm = $this->form_sm;
        $form_sm->prepare();
        echo $this->form()->openTag($form_sm);
    ?>

    <dl class="form">
    <dd><?php
            echo $this->formElement($form_sm->get('email'));
            echo $this->formElementErrors($form_sm->get('email'));
        ?></dd>
    <dd><?php
            echo $this->formElement($form_sm->get('password'));
            echo $this->formElementErrors($form_sm->get('password'));
        ?></dd>
    <li class="divider" style="width:78%"></li>
    <dd><?php
            echo $this->formElement($form_sm->get('send'));
            echo $this->formElementErrors($form_sm->get('send'));
        ?></dd>
   <?php echo $this->form()->closeTag() ?>      
</div>

</li>
</ul>

它使用Bootstrap3和Zend Framework组件，并单击行

后面的“a”标记

<li class="dropdown" id="menuLogin">

更改为

<li class="dropdown open" id="menuLogin">

Answer 1

您可以使用复选框hack来执行此操作。由于它是纯CSS，因此存在一些限制。您要隐藏的元素必须是您将使用的标签的兄弟姐妹或子女，因此您可以在获得:checked状态时选择它们。你不能在CSS中找到元素的父元素。

以下是一个示例：http://jsfiddle.net/carloscalla/msaccf9w/

HTML：

<label class="hide_action" for="chk1">Action toggle</label>
<input id="chk1" type="checkbox" />
<div>Sibling div</div>

CSS：

.hide_action{
  display:block;
  background-color: yellow;
}
.hide_action + input{ /* or #chk1 */
  display:none;
}
.hide_action + input + *{ /* or #chk1 (selector for what you want to hide) */
  display:none;
}
.hide_action + input:checked + *{ /* or #chk1:checked (selector for what you want to hide) */
  display:block;
}

你不能上父和隐藏其他元素，因为你将无法获得它的选择器。你可以去儿童或兄弟姐妹。

在此示例中，我使用+ input选择label的adyacent输入，如果您不希望它们在一起，则可以通过CSS注释中的ID来识别它。

单击<a> tag when JavaScript is disabled?</a> </div>以显示/隐藏<div>

1 个答案: