问题描述
我正在为网站上的网页编写代码，该代码仅允许我们通过Kentico CMS上传网站，并且我们必须将HTML粘贴到源代码中。页面的其余部分是我们必须使用的模板，导航栏和页脚以及一些侧边栏。这给我带来了很多问题，我正在慢慢解决。我现在遇到的一个问题是，在模板代码中的某个地方，它覆盖了我为模式和手风琴编写的HTML。因此，当我打开包含手风琴内容的模态时，当我打开手风琴时，它会关闭模态。我已经在自己的网站上对此进行了测试，并且效果很好。更改模板中的代码不是一种选择，因此我需要一种方法来更改自己的代码。我正在使用Bootstrap制作如下的模式和手风琴，
child我想我需要将// App.jsx
function App() {
return (
<div>
<MainComponent>
<div class="child">
</div>
</MainComponent>
</div>
);
};
// MainComponent.jsx
function MainComponent(props) {
return (
<main>
{props.children}
</main>
);
};
类更改为类似//Image which when clicked opens the modal
<div class="portfolio-item mx-auto" data-target="#ICSkin" data-toggle="modal">
<div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
<div class="portfolio-item-caption-content text-center text-white"> </div>
</div>
<img alt="skin" class="img-fluid" src="https://www.tamesideandglossopccg.org/getmedia/3c0a1bd9-6e4b-45b1-81ee-fafed1fd2cdc/skin" />
<p class="text-center">Skin & Soft Tissue Infection</p>
</div>
//Code for the modal including accordion
<div aria-hidden="true" aria-labelledby="SkinLabel" class="portfolio-modal modal fade " id="ICSkin" role="dialog" tabindex="-1">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content"><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true"><i class="fas fa-times"> </i></span></button>
<div class="modal-body text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8"><!-- Portfolio Modal - Title-->
<h2 class="portfolio-modal-title text-secondary text-uppercase mb-0" id="PCSkinLabel">Skin and Soft Tissue Infections</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"> </div>
<div class="divider-custom-icon"><i class="fas fa-star"> </i></div>
<div class="divider-custom-line"> </div>
</div>
<h4 id="ICSkinTissue"><a href="#bites">Human and Animal Bites</a></h4>
<!--Bites-->
<div class="text-left" id="PCbitesSection">
<h2 class="text-center" id="PCbites">Human and Animal Bites</h2>
<p>Some more text</p>
<!--Accordion-->
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapSEOne" aria-expanded="false" aria-controls="collapSEOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapSEOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit,raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
的类，然后编写一些js以使单击标题时手风琴打开和关闭？我对js并不太自信，无法使其正常工作。我尝试了一些jquery来简单地显示或隐藏该类链接到的div，但是没有运气。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）