个人中心
gpt4 book ai didi

javascript - 纯 Javascript 的 CSS 转换

转载 作者：行者123 更新时间：2023-11-30 06:25:26 25 4
gpt4 key购买 nike

我正在做一个移动页面/广告，在图片顶部有 4-5 个小信息框。触摸时，一个框将展开并显示有关图像该部分的文本。当触摸下一个框时，它将展开，而另一个当前展开的框将恢复为默认值。我需要保持它的重量很轻，所以我一直在玩一个使用 :target 伪类的纯 CSS 版本。除了预期的页面跳转到顶部之外，它工作得很好。

<body>
<div class="page">
    <a id="button1" href="#button1">
        btn1
    </a>
    <a id="button2" href="#button2">
        btn2
    </a>
    <a id="button3" href="#button3">
        btn3
    </a>
    <a id="button4" href="#button4">
        btn3
    </a>

</div>
</body>

Fiddle

为了避免不需要的页面跳转，我得出结论，我需要使用 Javascript 通过点击事件来控制它。虽然它很小，但 jQuery 库会占用我可用的 kB，所以不是一个选项。我花了几天时间在网上浏览解决方案来实现某种删除/添加类功能，但无济于事。我设法分别展开和关闭盒子，但是当所有盒子同时打开时，它会留下一团糟。我意识到我必须以某种方式让它删除扩展类的任何当前实例，但是如何？

<body>
<div class="page">
    <div class="box1">
    </div>

    <div class="box2">
    </div>
</div>
</body>

js:

var hasClass = function (elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}

var addClass = function (elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}

var removeClass = function (elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}

// Boxes Functions
if ( 'querySelector' in document && 'addEventListener' in window ) {

    var box1items = document.querySelectorAll('.box1');
    var box2items = document.querySelectorAll('.box2');


    [].forEach.call(box1items, function (box1) {

        box1.addEventListener('click', function(e) {

            if ( hasClass(box1, 'box1stage2') ) {
                removeClass(box1, 'box1stage2');
            }

            else {
                addClass(box1, 'box1stage2');
            }



        }

    )

    });

    [].forEach.call(box2items, function (box2) {

        box2.addEventListener('click', function(e) {

            if ( hasClass(box2, 'box2stage2') ) {
                removeClass(box2, 'box2stage2');
            }

            else {
                addClass(box2, 'box2stage2');
            }



        }

    )

    });

}

非常感谢任何帮助! http://jsfiddle.net/negativebyte/BE4BJ/1/

最佳答案

我试了一下你帖子中的最后一个 fiddle ，将它和我的一些样板代码结合起来。它将允许任意数量的任何特定类别的框，并在打开新框时关闭任何具有相同类别的框。

我确实注意到您的 css 对于 box1stage2 和 box2stage2 是相同的 - 除非您希望能够专门针对项目，否则您可以使用单个 boxStage2 类 - 但是，这将消除控制哪些框属于组的能力和最终它会影响同时打开盒子的数量。在我的演示中，您可以同时打开每个 box1 和 box2 中的 1 个。尝试打开第三个盒子将关闭已经打开的具有相同类别的盒子。另外，请注意，为了方便起见，我已经注释掉了绝对定位——我不想制定更多的 css 规则来定位和定位额外的框。我还删除了您的一些代码，发现它过于冗长且难以阅读。请特别注意我对函数 forEachNode 的使用——它基本上为您提供了 nodeLists 上的 forEach 功能——而不仅仅是数组。也许这是个人喜好，也许比这更有值(value)，你得问问别人。

代码:

<!DOCTYPE html>
<html>
<head>
<script>
/////////////////////////////////////////////////////////////
////    U n u s e d   i n   t h i s   s a m p l e
/////////////////////////////////////////////////////////////
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}

/////////////////////////////////////////////////////////////
////    R e q u i r e d   b y   t h i s   s a m p l e
/////////////////////////////////////////////////////////////
function toggleClass(element, newStr)
{
    var index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

function mInit()
{
    // Boxes Functions
    if ( 'querySelector' in document && 'addEventListener' in window ) 
    {
        var box1Items = document.querySelectorAll('.box1');
        var box2Items = document.querySelectorAll('.box2');
        forEachNode(box1Items, addBox1EvtListeners);
        forEachNode(box2Items, addBox2EvtListeners);
    }

    function addBox1EvtListeners(elem, index, list)
    {
        elem.addEventListener('click', onBox1_click, false);
    }

    function addBox2EvtListeners(elem, index, list)
    {
        elem.addEventListener('click', onBox2_click, false);
    }
}

var hasClass = function (elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}

var addClass = function (elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}

var removeClass = function (elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}

function onBox1_click(e)
{
    var box1Elems = document.getElementsByClassName('box1');
    var clickedBox = this;
    forEachNode(box1Elems, remClass1);
    toggleClass(this, 'box1stage2');
    function remClass1(elem, index, nodeList)
    {
        if (elem != clickedBox)
            removeClass(elem, 'box1stage2');
    }
}

function onBox2_click(e)
{
    var box2Elems = document.getElementsByClassName('box2');
    var clickedBox = this;
    forEachNode(box2Elems, remClass2);
    toggleClass(this, 'box2stage2');
    function remClass2(elem, index, nodeList)
    {
        if (elem != clickedBox)
            removeClass(elem, 'box2stage2');
    }
}

</script>
<style>
.page {
    position:relative;
    top:0px;
    left:0px;
    width:580px;
    height:500px;
    background:#CCCCCC;
}

.box1 {
/*
    position:absolute;
    top:250px;
    left:85px;
*/
    width:40px;
    height:40px;
    border-radius:5px;
    background:rgba(0,0,0,0.5);
    -webkit-transition: All 0.4s ease;
}

.box1stage2 {
    width:200px;
    height:100px;
    background:rgba(0,0,0,0.85);
    -webkit-transition: All 0.4s ease;
}

.box2 {
/*
    position:absolute;
    top:200px;
    left:230px;
*/ 
 width:40px;
    height:40px;
    border-radius:5px;
    background:rgba(0,0,0,0.5);
    -webkit-transition: All 0.4s ease;
}

.box2stage2 {
    width:200px;
    height:100px;
    background:rgba(0,0,0,0.85);
    -webkit-transition: All 0.4s ease;
}
</style>
</head>
<body>
<div class="page">
    <div class="box1">
    </div>

    <div class="box2">
    </div>

    <div class="box1">
    </div>

    <div class="box2">
    </div>
</div>
</body>
</html>

关于javascript - 纯 Javascript 的 CSS 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21497876/

25 4 0
文章推荐： javascript - 如何构建源代码以使其占用更少的空间？
文章推荐： java - 我怎样才能使代码块通用？
文章推荐： java - 将二进制文件复制到 jar 之外
文章推荐： javascript - 如何使用 cheerio 从网页中的换行符中抓取内容
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com