单击按钮时仅打开其下方的窗格

Question

我有最大高度的 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")
        }))
    })

Answer 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));
}

单击按钮时仅打开其下方的窗格

Opening only the pane below itself when the button is clicked

jquery

tailwind-css