Question

我有3个设置，其中有3个子设置。我想在单击设置1等时切换设置1的子设置。

我尝试了这个也包含ajax代码的jQuery：

function settingsClicked() {
    $(document).ready(function() {
        $('div.settings>i ').click(function () {
            $(this).toggleClass("fa-toggle-off fa-toggle-on");
            $('.sub-settings').toggle();
            var x = this.className; 
        if( x == 'fas fa-toggle-off'){
            var msg = "Settings Disabled"
            var posting = $.post ( "request.php", {displayMsg:msg});
            posting.done( function (data) {
            alert(data);
            });     
        }   
        else {
            var msg = "Settings Enabled"
            var posting = $.post ( "request.php", {displayMsg:msg});
            posting.done( function (data) {
            alert(data);
            });   
        }
        });
    });
}

这是我的html代码：

           <div class="settings">
                <div class="settings-heading">Settings  1 : </div>
                <i class="fas fa-toggle-off" class="settings-btn"></i>
                <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  1 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div>
                <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  2 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div>
                <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  3 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div>
             </div>
             <div class="settings">
                 <div class="settings-heading">Settings 2 : </div> 
                 <i class="fas fa-toggle-off" class="settings-btn"></i>   
                 <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  1 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div>
                <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  2 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div>
                <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  3 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div> 
             </div>
             <div class="settings">
                 <div class="settings-heading">Settings 3 : </div> 
                 <i class="fas fa-toggle-off" class="settings-btn"></i>
                 <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  1 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div>
                <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  2 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div>
                <div class="sub-settings">
                  <div class="sub-settings-heading">Sub-Settings  3 : </div>
                  <i class="fas fa-toggle-off" class="sub-settings-btn"></i> 
                </div>
             </div>

css代码：

.settings {
    padding: 10px;
    background-color: white;
} 

.col-md-12 {
    border: 2px solid #dee2e6;
    border-radius: 10px;
    background-color: white;
    margin-bottom: 2%;
}

.settings-heading {
    display : inline-block;
    font-size: 1.2em;
    color: #343A40;
    font-family: 'Dosis', sans-serif;
    font-weight: bold;
    width: 95px;
}

.sub-settings {
    display: none;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 50%;
}

.sub-settings-heading {
    display: inline;
}

.settings i {
    font-size: 20px;    
}

.fa-toggle-on {
    color: green;
}

在网页上看起来像这样，当我单击设置1时，我想显示子设置1，并且图标可以更改为开/关

Answer 1

我已更改代码以显示特定于子设置的单击元素：

更改为：

$(this).parent('.settings').children('.sub-settings').toggle();
$(this).parent('.settings').children('.sub-settings').children('i').addClass('fa-toggle-on').removeclass('fa-toggle-off');

演示：https://codepen.io/creativedev/pen/jKXgmG

$(document).ready(function() {
    $('.sub-settings').hide();
    $('div.settings>i ').click(function() {
        $(this).toggleClass("fa-toggle-off fa-toggle-on");
        $(this).parent('.settings').children('.sub-settings').toggle();
        var x = this.className;
        if (x == 'fas fa-toggle-off') {
            var msg = "Settings Disabled"
            var posting = $.post("request.php", {
                displayMsg: msg
            });
            posting.done(function(data) {
                alert(data);
            });
        } else {
            var msg = "Settings Enabled"
            var posting = $.post("request.php", {
                displayMsg: msg
            });
            posting.done(function(data) {
                alert(data);
            });
        }
    });
});

Answer 2

您可以创建一个不显示类，并根据需要从元素中添加或删除它。

var toggle = false;

$("#show").click(function(){
    if(toggle){
      $("#Main").addClass("noDisplay");
      toggle = false;
    }else{
      $("#Main").removeClass("noDisplay");
      toggle = true;
    }
});

.noDisplay{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<button id="show">Show/hide</button>


<div id="Main" class="noDisplay">
 <h2>Content to hide or show </h2>
 <h2>Content to hide or show </h2>
 <h2>Content to hide or show </h2>
</div>

由于存在设置，而不是发布单个设置事件，因此您可以添加保存更改以一次发布所有内容。

如何根据点击切换项目？

2 个答案: