个人中心
gpt4 book ai didi

javascript - 如何在单击下拉菜单时减小框架大小

转载 作者：行者123 更新时间：2023-11-28 07:01:03 25 4
gpt4 key购买 nike

实际上我正在使用框架来分割整个窗口。所以，我在这里使用了四个 html 页面。

这里我已经在 test.html 中分割了所有的框架。我在 bottom.html 中有下拉框。如果我们点击下拉框，框架大小应该被扩展，稍后我们可以选择其中的选项list.If no option is selected,then we should reduce the frame size.

对于此要求的引用，您可以在这个 url 中看到:Reference

我的测试.html:

 <!DOCTYPE html>
<html>
<head>
<style>
.expanded {
    background-color: #e3e3e3;
    width: 100px;
    height: 100px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("input[type='checkbox'").click( function() {

  if($("input[type='checkbox']:checked").length > 0) {
    $("frame[name='bottom_page']").addClass("expanded");

  } else {
    $("frame[name='bottom_page']").removeClass("expanded");
  }
});
</script>
</head>
<frameset cols="30%,100%">
  <frameset rows="70,200">
  <frame src="top.html" name="top_page" />
  <frame src="bottom.html" name="bottom_page" />
</frameset>
<frame src="main.html" name="main_page" />
</frameset>

</html>

我的 bottom.html:

<html>
    <head>
        <style>
            .multiselect {
                width: 200px;
            }
            .selectBox {
                position: relative;
            }
            .selectBox select {
                width: 100%;
                font-weight: bold;
            }
            .overSelect {
                position: absolute;
                left: 0; right: 0; top: 0; bottom: 0;
            }
            #checkboxes {
                display: none;
                border: 1px #dadada solid;
            }
            #checkboxes label {
                display: block;
            }
            #checkboxes label:hover {
                background-color: #1e90ff;
            }

        </style>
    </head>
    <body bgcolor="#B5DCB3">

        <script>
         var expanded = false;
            function showCheckboxes() {
                var checkboxes = document.getElementById("checkboxes");
                if (!expanded) {
                    checkboxes.style.display = "block";
                    expanded = true;
                } else {
                    checkboxes.style.display = "none";
                    expanded = false;
                }
            }
        </script>
        <form>
            <div class="multiselect">
                <div class="selectBox" onclick="showCheckboxes()" >
                    <select>
                        <option>Select Country</option>
                    </select>
                    <div class="overSelect" id="selectId"></div>
                </div>
                <div id="checkboxes">
                    <label for="one"><input type="checkbox" id="one"/>Afghanistan</label>
                    <label for="two"><input type="checkbox" id="two"/>Aland Islands</label>
                    <label for="three"><input type="checkbox" id="three"/>Albania</label>
                    <label for="four"><input type="checkbox" id="four"/>Algeria</label>
                    <label for="five"><input type="checkbox" id="five"/>American Samoa</label>
                    <label for="six"><input type="checkbox" id="six"/>Andorra</label>
                    <label for="seven"><input type="checkbox" id="seven"/>Angola</label>
                    <label for="eight"><input type="checkbox" id="eight"/>Anguilla</label>
                </div>
            </div>
        </form>
    </body>
</html>

任何人都可以就这个问题向我提出建议...

最佳答案

据我所知，这可能是一个合适的解决方案:

// Watch for checkbox selection changes
$("input[type='checkbox'").click( function() {
  // If more than one checkbox is selected, add expanded class to target
  if($("input[type='checkbox']:checked").length > 0) {
    $("frame[name='main_page']").addClass("expanded");
  // If not, remove expanded class
  } else {
    $("frame[name='main_page']").removeClass("expanded");
  }
});

这是 a working JSFiddle它在行动。

关于javascript - 如何在单击下拉菜单时减小框架大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33232764/

25 4 0
文章推荐： 使用许多插件的 CSS 样式依赖
文章推荐： html - 宽度等于高度，填充问题
文章推荐： javascript - Google 表格图表样式
文章推荐： css - Bootstrap 3 和 Rails 4 输入字段下的边距