Question

我正在使用Django开发博客类型的Web应用程序。我想在主页上显示所有帖子。每个帖子都包含一个合拢面板。

最初，用于触发合拢面板的ID进行了硬编码，因此，只要单击一个合拢面板，所有合拢面板就会打开。

因此，我更改了用于触发合拢面板的ID。我将帖子ID用作HTML ID或触发了折叠面板。

但是问题是折叠面板根本无法工作。

这就是我更改硬编码ID的方式。

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_citation);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        dafpus = findViewById(R.id.bgutentangaplikasi);
        selesai = findViewById(R.id.button10);
        sebelumnya = findViewById(R.id.button18);

        Glide.with(this).load(R.drawable.dafpus).into(dafpus);

        selesai.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final Animation animation = AnimationUtils.loadAnimation(CitationActivity.this, R.anim.bounce);
                BounceInterpolator interpolator = new BounceInterpolator(0.2, 20);
                animation.setInterpolator(interpolator);
                selesai.setAnimation(animation);
                Intent intent = new Intent(CitationActivity.this, MainMenuActivity.class);
                intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP | Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
                finish();
            }
        });

    }


    public void backToPrev(View view) {
        final Animation animation = AnimationUtils.loadAnimation(CitationActivity.this, R.anim.bounce);
        BounceInterpolator interpolator = new BounceInterpolator(0.2, 20);
        animation.setInterpolator(interpolator);
        sebelumnya.setAnimation(animation);
        super.onBackPressed();
    }
}

这是我从bootstrap4组件中获取的代码。

 {% for post in posts %}
            <div class="container shadow mt-4 pl-3 pr-3 pb-3" style="border-radius: 10px;">
                <div class="user row p-3">
                    <img class="rounded-circle img-avatar" src="{{ post.author.profile.image.url }}" alt="">
                    <p class="author-name font-weight-bold font ml-4 mt-3">Username</p>
                </div>

                <div class="question">
                    <p>{{ post.question }}</p>
                </div>

                <button class="mb-2" style="border: none;  background-color: transparent" type="button"
                        data-toggle="collapse"
                        data-target={{ "#"|join:post.id }}
                                aria-expanded="false" aria-controls={{ post.id|slugify }}>
                    <i class="fas fa-angle-down pl-1 pr-1"></i>
                </button>


                <div class="collapse" style="overflow: hidden" id={{ post.id|slugify }}>
                    <div class="card card-body options">
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option1 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option2 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option3 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option4 }}</span></li>
                        {% if post.option5 %}
                            <li class="options"><input type="radio" name="options"><span
                                    class="pl-2 pr-3">{{ post.option5 }}</span></li>
                        {% endif %}
                    </div>
                    <button type="submit" class="btn btn-primary float-right mt-3">Submit</button>
                </div>
            </div>
        {% endfor %}

Answer 1

data-target="#{{ post.id }}"这将解决。

一键式打开多个bootstrap折叠面板

1 个答案: