Question

这是我的代码：

               <div class="checkbox">
                    <input id="230am" type="checkbox" onclick="openPopup()"> <label for="230am"></label>

                    <div id="popupBk">
                        <div id="title">Reminder</div>
                        <div id="timeSelect">
                            Start time: <input id="field1" /><br /><br />
                            End time: <input id="field2" /><br /><br />
                        </div>

                        <button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button>
                        <div id="close_popup" title="Close this menu" onclick="closePopup()">
                            <p>X</p>
                        </div>
                    </div>

                </div>
                <div class="checkbox">
                     <input id="3am" type="checkbox"> <label for="3am"></label>

                <div id="popupBk">
                        <div id="title">Reminder</div>
                        <div id="timeSelect">
                            Start time: <input id="field1" /><br /><br />
                            End time: <input id="field2" /><br /><br />
                        </div>

                        <button onclick="processTime('field1','field2')" name="submit" id="submitButton"/>Create</button>
                        <div id="close_popup" title="Close this menu" onclick="closePopup()">
                            <p>X</p>
                        </div>
                    </div>

                </div>

以下是我的css：

       #popupBk{
         position: absolute;
         width: 25%;
         height: 20%;
         border: 2px solid grey;
         border-radius: 2px;
         background-color: white;
         margin-left: 3%;
         box-shadow: 2px 2px 10px;
         display: none;
         }

所以我想做一个日历应用程序。我在两个复选框中放了两个弹出框，只是想在不同的弹出窗口中显示每个复选框一旦我点击。任何想法如何做到这一点？

我认为有一种方法可以使每个类名不同，然后创建自己的css，但如果它可能需要一个巨大的工作。或者还有其他方法吗？

感谢。

Answer 1

您可以使用CSS中的:checked状态复选框，以及常规兄弟选择器（~）来执行此操作。

在此处阅读有关兄弟选择器的信息：https://css-tricks.com/child-and-sibling-selectors/

这是一个实例：

＆＃13;

.wrapper {
  float: left;
}

.hidden {
  border: 1px solid #000;
  display: none;
}

input[type="checkbox"]:checked ~ .hidden {
  display: block;
}

＆＃13;

<div class="wrapper">
  <input type="checkbox" id="box1" /> <label for="box1">Show Box 1</label>

  <div class="hidden">Box 1</div>
</div>

<div class="wrapper">
  <input type="checkbox" id="box2" /> <label for="box2">Show Box 2</label>

  <div class="hidden">Box 2</div>
</div>

＆＃13;

弹出光标点击css的不同位置

1 个答案: