单击按钮时仅打开其下方的窗格[关闭]

Posted 2023-03-07

【中文标题】单击按钮时仅打开其下方的窗格[关闭]

【英文标题】：Opening only the pane below itself when the button is clicked [closed]

【发布时间】：2021-12-03 15:46:08

【问题描述】：

我有最大高度的 div。这些div的属性是overflow: hidden;当点击下面的阅读更多按钮时，只有它自己下面的divin是overflow:hidden;我想去掉这个功能。我试过但失败了。如何做到这一点？

我的 html 代码：

 <div class="w-1/2 md:w-1/4 mr-4 md:mr-20 flex flex-col">
                <h1
                    class="border-b border-gray-400 font-bold text-base sm:text-2xl md:text-4xl lg:text--5xl xl:text-7xl font-akrobat pb-2 text-right">
                    2019</h1>
                <p class="read-text mt-4 max-h-16 overflow-hidden text-xs">Lorem ipsum dolor, sit amet consectetur
                    adipisicing elit.
                    Autem qui, aliquam voluptas quasi recusandae quidem possimus repellendus eos asperiores aut
                    incidunt fuga necessitatibus ipsam doloribus vitae fugiat molestiae numquam quod quaerat
                    dignissimos dolorum. .</p>

                <a class=" w-full mt-2 text-right read-more text-blue-500 underline" href="#">Read More..</a>

            </div>
 <div class="w-1/2 md:w-1/4 mr-4 md:mr-20 flex flex-col">
                <h1
                    class="border-b border-gray-400 font-bold text-base sm:text-2xl md:text-4xl lg:text--5xl xl:text-7xl font-akrobat pb-2 text-right">
                    2019</h1>
                <p class="read-text mt-4 max-h-16 overflow-hidden text-xs">Lorem ipsum dolor, sit amet consectetur
                    adipisicing elit.
                    Autem qui, aliquam voluptas quasi recusandae quidem possimus repellendus eos asperiores aut
                    incidunt fuga necessitatibus ipsam doloribus vitae fugiat molestiae numquam quod quaerat
                    dignissimos dolorum. .</p>

                <a class=" w-full mt-2 text-right read-more text-blue-500 underline" href="#">Read More..</a>

            </div>
 <div class="w-1/2 md:w-1/4 mr-4 md:mr-20 flex flex-col">
                <h1
                    class="border-b border-gray-400 font-bold text-base sm:text-2xl md:text-4xl lg:text--5xl xl:text-7xl font-akrobat pb-2 text-right">
                    2019</h1>
                <p class="read-text mt-4 max-h-16 overflow-hidden text-xs">Lorem ipsum dolor, sit amet consectetur
                    adipisicing elit.
                    Autem qui, aliquam voluptas quasi recusandae quidem possimus repellendus eos asperiores aut
                    incidunt fuga necessitatibus ipsam doloribus vitae fugiat molestiae numquam quod quaerat
                    dignissimos dolorum. .</p>

                <a class=" w-full mt-2 text-right read-more text-blue-500 underline" href="#">Read More..</a>

            </div>

我的 JS 代码：

  $(".read-more").each("item", function () 
        $("item".on("click", function () 
            $(".read-text").removeClass("overflow-hidden");
            $(".read-more").addClass("hidden")
        ))
    )

【问题讨论】：

为'hidden'和'overflow-hidden'类添加css

【参考方案1】：

让我们迈出这小步，开始从您的代码库中删除 jQuery。这是香草JS解决方案：

function onclickReadMore(event) 
  event.preventDefault();
  const next = this.parentElement;
  next?.querySelector('p.read-text')?.classList.remove('overflow-hidden');
  next?.querySelector('a.read-more')?.classList.add('hidden');


const btnReadMore = document.querySelectorAll('a.read-more');

for (const btn of btnReadMore) 
  btn?.addEventListener('click', onclickReadMore.bind(btn));

【讨论】：

不幸的是，这个解决方案不起作用。我得到控制台错误：未捕获的类型错误：无法在 HTMLAnchorElement.onclickReadMore

处读取未定义的属性（读取“preventDefault”）

尝试用call替换bind：onclickReadMore.call(btn, event)。让我知道这是否有效。然后，我将编辑我的答案，以便您将其标记为答案。

控制台仍然给出同样的错误。错误：未捕获的类型错误：无法在 HTMLAnchorElement.onclick 读取未定义的属性（读取“preventDefault”）阅读更多

当我们删除 nextelementsibling 时，它工作正常，如果你这样编辑，我会立即批准。谢谢你的帮助:)