Question

我正在使用＆＃34; mixuitup＆＃34;对内容进行一些排序和过滤。

在使用他们的网站（https://mixitup.kunkalabs.com/）时，我对他们设置的非常有用的技巧感到震惊。在页面加载时，蓝色div的网格显示在4 * 4网格中。

它们在页面上显示为：

<div id="SandBox" class="sandbox">
    <div style="display: inline-block;" class="mix category-2" data-value="9">9</div>
    <div style="display: inline-block;" class="mix category-1" data-value="10">10</div>
    <div style="display: inline-block;" class="mix category-2" data-value="6">6</div>
    <div style="display: inline-block;" class="mix category-2" data-value="12">12</div>
    <div style="display: inline-block;" class="mix category-2" data-value="8">8</div>
    <div style="display: inline-block;" class="mix category-1" data-value="4">4</div>
    <div style="display: inline-block;" class="mix category-2" data-value="3">3</div>
    <div style="display: inline-block;" class="mix category-1" data-value="1">1</div>
    <div style="display: inline-block;" class="mix category-1" data-value="2">2</div>
    <div style="display: inline-block;" class="mix category-2" data-value="11">11</div>
    <div style="display: inline-block;" class="mix category-2" data-value="5">5</div>
    <div style="display: inline-block;" class="mix category-1" data-value="7">7</div>
    <div class="gap"></div>
    <div class="gap"></div>
</div>

在网格上方的过滤器部分有各种选项：

<div class="group">
    <label>Filter:</label>
    <span class="btn filter active" data-filter="all">All</span>
    <span class="btn filter" data-filter=".category-1">Blue</span>
    <span class="btn filter" data-filter=".category-2">Green</span>
    <span class="btn filter" data-filter="none">None</span>
    <span id="ToggleLayout" class="btn toggle-layout">&nbsp;<i></i></span>
    <span id="ToggleConfig" class="btn toggle-config">&nbsp;</span>
</div>

我想弄清楚当点击ToggleLayout选项时如何：

跨度从3条水平线变为网格
Sandbox中的DIV从4 * 3网格变为每个占据Sandbox div的整个宽度

我认为有一些非常聪明的CSS和JS正在工作，但我无法将其隔离出去？

这里有对ToggleLayout的引用：

https://mixitup.kunkalabs.com/wp-content/themes/mixitup.kunkalabs/js/main.min.js?ver=1.5.4

无论如何，我可能会因为提出一个懒惰的问题而关闭我的帐户，但我认为无论如何都要冒险。

由于

感谢这里的帮助，我发现我可以使用toggleClass来交换类，它做了类似的事情：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <title>Test</title>
        <style> .test1 { background: beige; padding:20px; margin:20px; display:block; } </style>
        <style> .test2 { background: silver; padding:20px; margin:20px; display:inline-block; width:100px; float:left; } </style>
    </head>

    <body style="margin-top:50px;">

        <div class="test1">a</div>
        <div class="test1">a</div>
        <div class="test1">a</div>
        <div class="test1">a</div>
        <div class="test1">a</div>
        <div class="test1">a</div>

        <br />

        &nbsp;

        <button>test</button>

        <script>
        $(document).ready(function(){
            $("button").click(function(){
                $('div').toggleClass('test1 test2');
            });
        });
        </script>

    </body>

</html>

Answer 1

您可以创建一些jquery代码，将类，样式或任何属性更改为所需类型。 http://api.jquery.com/attr/

我不知道你是想在点击一个或只有一个点击时更改它们。很抱歉发布这个作为答案而不是评论，我还不能发表评论。：P

单击按钮更改div样式

1 个答案: