Question

我有两个隐藏在display:none的文本，如果我点击object1，它会出现在它下面的文字，如果我点击object2会出现另一个文字，但第一个文字会消失。

然后我可以再次点击object1使第二个文本消失，第一个文本出现。

但是我无法再将文本发送到display:none;，因为我必须在点击其中一个后立即选择一个对象。

现在我的问题是，如果有一个CSS代码：

如果单击object1 / object2两次，则text1 AND text 2将再次像display:none一样开始。

Answer 1

使用jQuery：

<system.webServer>
    <modules>
        <add name="FormsAuthenticationModule" type="System.Web.Security.FormsAuthenticationModule" />
        <remove name="UrlAuthorization" />
        <add name="UrlAuthorization" type="System.Web.Security.UrlAuthorizationModule"  />
        <remove name="DefaultAuthentication" />
        <add name="DefaultAuthentication" type="System.Web.Security.DefaultAuthenticationModule" />
    </modules>
</system.webServer>

- 编辑更好的版本 -

$('#obj1').dblclick(function(){
    $('text2').toggle();
});

Answer 2

一种非常简单的CSS方式来执行“手风琴”之类的行为就是使用CSS伪造元素:target，它似乎完全支持当前的浏览器（声明基于caniuse.com链接）

如果网址中的:target与元素的ID匹配，基本上#id有效，如下所示：

#text {
  transition: all linear 0.3s;
  visibility: hidden;
  height: 0;
  width: 0;
}
#text:target {
  height: 300px;
  width: 300px;
  visibility: visible;
}

<a href="#text"> Click me to Show something </a>
<br />
<textarea id="text"></textarea>

这可以通过调整CSS和HTML来与其他链接和项目链接在一起。

.special-section-name textarea {
  transition: all linear 0.3s;
  visibility: hidden;
  height: 0;
  width: 0;
}
.special-section-name textarea:target {
  visibility: visible;
  height: 400px;
  width: 450px;
}

<div class="special-section-name">
  <a href="#text1">Text 1</a>
  <br />
  <textarea id="text1"></textarea>
</div>

<div class="special-section-name">
  <a href="#text2">Text 2</a>
  <br />
  <textarea id="text2"></textarea>
</div>

如果你想通过“双击”（连续点击两次）来工作，你将需要一个CSS之外的解决方案。如果这对您有用，请告诉我。

Answer 3

如果您不需要支持文件，可以通过CSS和HTML完全本地执行此操作，方法是利用:checked伪类，+选择器，label标记和input type="radio"。

.accord-tog{ display:none; }
.accord-button{ display:block; }
.accord-content{ display:none; }
.accord-tog:checked + .accord-button + .accord-content{ display:block; }

<input type="radio" name="accord$1" id="accord$1$1" class="accord-tog" />
<label for="accord$1$1" class="accord-button">Object 1</label>
<div class="accord-content">Text 1</div>
<input type="radio" name="accord$1" id="accord$1$2" class="accord-tog" />
<label for="accord$1$2" class="accord-button">Object 2</label>
<div class="accord-content">Text 2</div>

对于更具动画效果的版本（并使用checkbox es（因此为什么不关闭另一个）），请参阅my answer over here。

如果你想再次点击点击支持，你可能需要使用JS，不幸的是。

Answer 4

我不确定我是否正确理解您的问题，但如果您想要一个纯CSS双击实现能够保持其当前的双击切换状态，我可以向您显示我的代码。它使用2个堆复选框和一个动画。第一个复选框“开始处理双击”，第二个复选框保持当前的切换状态。

在下面的代码段中（将其更好地切换到整页），双击紫色框。然后再次双击它。此代码不使用JavaScript，它仅限CSS。另请注意，单击不执行任何操作，只需双击即可。

@keyframes show1 {
  from {
    visibility: hidden;    
  }
  to {
    visibility: visible;    
  }
}
@keyframes show2 {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

@keyframes show3 {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

@keyframes show4 {
  from {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}


#click, #click2 {
  display: none;
}

#single-click, #single-click2 {  
  width: 100px;
  height: 100px;
  position: absolute;
  cursor: pointer;  
}

#single-click {
  animation: show1 200ms steps(1);
}

#click:checked ~ #single-click {
  animation: show2 200ms steps(1);
}

#single-click2 {
  animation: show3 200ms steps(1);
}

#click2:checked ~ #single-click2 {
  animation: show4 200ms steps(1);
}

p {
  opacity: 0;
}

#click:checked ~ p {
  opacity: 1;
}

/*Other stuff*/

body {
  /*tap support*/
  touch-action: none;  
}

.size {
  width: 100px;
  height: 100px;  
}

#single-click {
  background-color: #3366CC;
}

#single-click2 { 
  background-color: #6C36C3; 
}

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>

  <body>
  <h1>CSS Double Click</h1>
  <h3>Double click detection without Javascript</h3>
  <h4>The enhanced version from https://codepen.io/ejsado/pen/EaFsy</h4>
  <div class="size">
    <input type="checkbox" id="click">
    <label id="single-click" for="click"></label>
    <input type="checkbox" id="click2">
    <label id="single-click2" for="click2"></label>    
    <div class="size"></div>
    <p class='menu-content'>You double clicked!</p>
  </div>
  <div class="size"></div>
  <h4>The colored box is a square checkbox label.</h4>
  <h4>It hides another square checkbox label of the same size (but of the different color).</h4>  
  <h4>When the top checkbox label is clicked, it triggers an animation which hides it for 200ms,</h4>
  <h4>and allows the bottom checkbox label to be checked.</h4>
  <h4>If the user is quick enough to check the bottom checkbox label, the success message appears.</h4>
  <h4>It is worth to note, that once the success message appeared, it can be removed only</h4>
  <h4>by either a new double-click or a page reload.</h4>
  </body>
</html>

是否有一个CSS代码，用于“双击”＆＃39;元素或另一种解决方法？

4 个答案: